angularjs视图没有更新答案

【问题标题】：angularjs view not getting updatedangularjs视图没有更新
【发布时间】：2015-01-01 21:03:21
【问题描述】：

这是一个使用路由的小型独立 html todo 应用程序...

它有两个视图 - list.html 和 add.html

list.html:

<div>    
    <a href="#/add" class="btn btn-default btn-sm" ng-click="setNewTask()">Add Task</a>
    <br />
    <br />
    <div class="container" id="tasks">
        <ul>
            <li ng-repeat="task in tasks">
                <button ng-show="!task.done" ng-click="markTaskAsDone(task)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-ok-circle"></span></button>
                <button ng-show="task.done" ng-click="markTaskAsNotDone(task)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-pushpin"></span></button>
                <button ng-click="removeTask(task)" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-remove-circle"></span></button>
                &nbsp;
                <s ng-show="task.done">{{task.desc}}</s>
                <span ng-show="!task.done">{{task.desc}}</span>
            </li>
        </ul>
        <p ng-show="tasks.length == 0">Add few tasks</p>
    </div>
</div>

add.html:

<div>
    <a href="#/" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-arrow-left"></span>&nbsp;Back</a>
    <h2>Add a task</h2>
    <div class="form-inline">
        <input type="text" data-ng-model="newTask.desc" placeholder="Enter Task..." class="form-control" />
        <a href="#/list" class="btn btn-default" data-ng-click="addNewTask()">Add</a>        
    </div>
</div>

我只有一个控制器。

controllers = {
    ToDoController: function ($scope, $timeout, $location) {

        //two items in by default...
        $scope.tasks = [
            { desc: 'Buy milk', done: false },
            { desc: 'Collect newspaper', done: false }
        ];

        $scope.newTask = { desc: '', done: false };

        $scope.addNewTask = function () {
            $location.path('/');
            console.log('a');
            $scope.tasks.push($scope.newTask);            
        }

        $scope.markTaskAsDone = function (task) {            
            task.done = true;
            console.log($scope.tasks);
        }

        $scope.markTaskAsNotDone = function (task) {
            task.done = false;
        };

        $scope.removeTask = function (task) {
            $scope.tasks.splice($scope.tasks.indexOf(task), 1);
        };

        //called to set newTask
        $scope.setNewTask = function () {
            $scope.newTask = { desc: '', done: false };            
        };
    }
};

我的 shell 页面如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>ToDo List</title>
    <!-- Bootstrap -->
    <link href="Content/bootstrap.min.css" rel="stylesheet">
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet">
    <style>
        #tasks ul {
            margin: 0px;
            padding: 0px;
            list-style: none;
            font-size: large;
        }
    </style>
</head>
<body>
    <h1>TODO App</h1>
    <div data-ng-app="todoApp">
        <div data-ng-view=""></div>
    </div>
    <script src="Scripts/jquery-1.9.0.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-route.min.js"></script>
    <script src="Scripts/todo.js"></script>
    <script>
        var app = angular.module('todoApp', ['ngRoute']);
        app.controller(controllers);
        app.config(function ($routeProvider) {
            $routeProvider
                .when('/list', {
                    controller: 'ToDoController',
                    templateUrl: 'partials/list.html'
                })
            .when('/add', {
                controller: 'ToDoController',
                templateUrl: 'partials/add.html'
            })
            .otherwise({ redirectTo: '/list' });
        });
    </script>
</body>
</html>

问题：

当我加载 index.html 时，它会显示 list.html。我放的两个默认项目出现了。我单击添加并导航到第二个视图（add.html），输入详细信息并单击该页面中的添加按钮...我导航到 list.html 视图，但它仍然显示旧列表...不是更新列表...

肯定缺少一些 api 调用来更新视图...否则此页面来自某个缓存。这样做的正确方法是什么？

【问题讨论】：

标签： javascript html angularjs view angular-ui-router

【解决方案1】：

ToDoController 为您的两个视图分别实例化了两次。要维护控制器的 1 个实例来控制两个视图，请不要在路由中声明它，而是在视图的父标记上声明它。

例如，像这样：

<div data-ng-app="todoApp" data-ng-controller="ToDoController">
    <div data-ng-view></div>
</div>

更好的是为每个视图编写单独的控制器以将视图特定的逻辑放入其中，并有 1 个父控制器来存储两个控制器都应该有权访问的值。

在隔离控制器之间共享作用域的另一种方法是使用 $rootScope，但您通常应该尽量避免使用它（就像在任何编程语言中尽量避免使用全局变量一样）。

【讨论】：

那么在定义路由时，处理这个问题的正确方法是什么？
我会为每个视图编写单独的控制器。然后，如果您希望这些控制器在范围内共享某些值，您可以编写第三个“父”控制器，或者使用 $rootScope。