Javascript angularjs视图未更新_Javascript_Html_Angularjs_View_Angular Ui Router

Javascript angularjs视图未更新

javascript html angularjs view

Javascript angularjs视图未更新,javascript,html,angularjs,view,angular-ui-router,Javascript,Html,Angularjs,View,Angular Ui Router,下面是一个使用路由的小型自包含html todo应用程序它有两个视图-list.html和add.html list.html：我的shell页面如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n

下面是一个使用路由的小型自包含html todo应用程序

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

list.html：我的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>

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

问题: 当我加载index.html时，它会显示list.html。我放置的两个默认项显示出来。我单击Add并导航到第二个视图Add.html，输入详细信息并单击该页面中的Add按钮…我导航到list.html视图，但它仍然显示旧列表…而不是更新的列表

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

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

比如像这样,

<!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>

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

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

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

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

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