[AngularJS] Accessing Data in HTML -- controllerAs, using promises 

<!DOCTYPE html>
<html>
<head>
    <title>Access Data From HTML</title>
</head>
<body ng-app="app" ng-controller="TodoCtrl as todoCtrl">

<div ng-repeat="todo in todoCtrl.todos">
    {{todo.item}}
</div>
<form>
    <input type="text" ng-model="newTodo"/>
    <input type="submit" ng-click="todoCtrl.addTodo(newTodo)"/>
</form>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

 

/**
 * Created by Answer1215 on 11/29/2014.
 */

function ToDoServices($q, $timeout) {

    var ToDoServices = {};

    ToDoServices.getTodos = function() {
        return $q(function(resolve, reject) {
            $timeout(function() {
                resolve(
                    {
                        todos: [
                            {item: "Clean room", done: false},
                            {item: "Eat lunch", done: false},
                            {item: "Wash car", done: false}
                        ]
                    }
                )
            }, 500);
        });
    };

    ToDoServices.addTodo = function(item) {

        this.todos.push({item: item, done: false})
    }

    return ToDoServices;
}


function TodoCtrl(ToDoServices) {

    var vm = this;
    vm.todos = [];

    vm.getTodos = ToDoServices.getTodos;
    vm.addTodo = ToDoServices.addTodo;

    vm.getTodos(vm.isReject).then(function(res) {
        vm.todos = res.todos;
    });
}

angular.module("app", [])
    .factory("ToDoServices", ToDoServices)
    .controller("TodoCtrl", TodoCtrl);

 

posted @ 2014-11-29 22:34  Zhentiw  阅读(170)  评论(0)    收藏  举报