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调用来对视图进行更新...否则此页面来自某个缓存。这样做的正确方法是什么？

Answer 1

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

例如，像这样：

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

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

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

angularjs视图没有得到更新

list.html：

add.html：

问题：

1 个答案: