Question

在使用Ui-Router处理angularJS应用程序期间，我注意到加载视图时，控制器中的$ scope方法被多次调用。经过一些调查后，它归结为Ui-Router本身，似乎每个州都会在ui-view中多次注入模板。

确认我创建了最简单的基于ui路由器的导航应用程序，其中包含2个模板和一个控制器，并且能够重现同样的问题。

这个测试创建了一个Plunk

这是index.html的来源

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>
<body ng-app="app">
    <div><a ui-sref="page1">Page 1</a>&nbsp;&nbsp;&nbsp;<a ui-sref="page2">Page 2</a></div>
    <div ui-view></div>
    <script src="angular-ui-router.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

(function () {
    'use strict';

    angular.module('app', [
    'ui.router'
    ])

        .config(function ($stateProvider) {

            $stateProvider

              .state('page1', {
                  url: '/1',
                  templateUrl: 'page1.html',
                  controller: 'mainCtrl'
              })

                .state('page2', {
                    url: '/2',
                    templateUrl: 'page2.html',
                    controller: 'mainCtrl'
                })
        }
    )

    .controller('mainCtrl', function ($scope) {

        $scope.log = log;

        function log(msg) {
            console.log(msg);
            return true;
        }

    });
})();

page1.html

<h1>Page 1</h1>
<div ng-if="log('page 1')"></div>

page2.html

<h1>Page 2</h1>
<div ng-if="log('page 2')"></div>

运行此示例时，打开浏览器的控制台，然后单击Page1和Page 2.您将看到每个状态更改记录消息2或3次。

我在网上搜索过，但似乎没有其他人报告此问题，所以在我的结尾可能有些不对劲。我很感激任何帮助。

Answer 1

您遇到的问题与UI-Router无关。让我使用这篇文章中的几个引用（你可以找到更多关于$apply()和$digest()的其他人）：

Sandeep Panda的

Understanding Angular’s $apply() and $digest()

$ apply和$ digest Explored

...当你写一个表达式（{{aModel}}）时，幕后的Angular会在范围模型上设置一个观察者......

这正是你在这里发生的事情：

<div ng-if="log('page 1')"></div>

ng-if 指令现在是摘要周期的一部分，并检查其值是否未更改。什么时候发生？多久一次？：

$ digest循环运行多少次？

...答案是$ digest循环不会只运行一次。在当前循环结束时，它会重新开始检查是否有任何模型已更改。这基本上是脏检查，用于解释可能由侦听器函数执行的任何模型更改。 因此，$ digest循环会一直循环，直到没有更多的模型更改，或者它达到最大循环数为10 ...

就是这样。您已触发某些操作（点击链接，使用指令ui-sref）。角度环境已经开始发挥作用。没有错误...... UI-Router

中没有问题

您刚刚没有选择合适的地方，只能评估一次

UI-Router v 0.2.11中可能存在的错误：在ui-view中为每个状态多次注入模板

1 个答案:

Understanding Angular’s $apply() and $digest()