角指令中的$observe只会触发第一个属性的更改。

Question

我正在尝试编写一个自定义指令，但该指令所观察到的属性似乎只在初始作用域更改上发生了更改。之后，视图中的绑定(使用Firebug观察到)不再更新。这似乎是一个范围问题，但我没有主意了。

JSFiddle链接显示了带有问题的代码：http://jsfiddle.net/catalyst156/2gp78/ (下面是小提琴的内容，但它可能会对处理小提琴本身很有用)。

控制器：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js></script>
<script>
var myApp = angular.module('myApp', []);

myApp.directive('testDirective', function () {
    return {
        restrict: 'A',
        replace: true,
        scope: {
            toggle: '@'
        },
        link: function (scope, element, attrs) {
            console.log('...linking testDirective...');

            attrs.$observe('toggle', function (value) {
                console.log('directive: toggle observer');
                if ('true' === value) {
                    console.log('directive: toggle=true');
                } else {
                    console.log('directive: toggle=false');
                }
            });
        }
    };
});

myApp.controller('myCtrl', ['$scope', '$log', function ($scope, $log) {
    $scope.toggleState = false;

    $scope.testToggle = function () {
        $scope.toggleState = true;
        $log.log('controller: toggleState=' + $scope.toggleState);

        setTimeout(turnToggleOff, 2000);
    };

    function turnToggleOff() {
        $scope.toggleState = false;
        $log.log('controller: toggleState=' + $scope.toggleState);
    }
}]);

​

HTML:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div test-directive toggle={{toggleState}}></div>
        <button ng-click="testToggle()">Toggle Me</button>
    </div>
</div>

控制台输出：

1: ...linking testDirective...
2: directive: toggle observer
3: directive: toggle=false
4: controller: toggleState=true
5: directive: toggle observer
6: directive: toggle=true
7: controller: toggleState=false 

我可以看到链接正常工作，初始状态按预期设置为false (第1-3行)。单击按钮，并将更改通知观察者(第4-6行)。但是，当计时器过期并'toggleState=false‘时，观察者永远不会接收到该更改。(超出的多个按钮按下仅显示来自控制器的控制台输出，并且观察者再也不会被触发)。

Answer 1

问题是角不知道setTimeout()所做的改变。另一种说法是：setTimeout()不会触发$digest循环。$timeout提供了与setTimeout()相同的功能，但是它会触发$digest，因此changes会看到变化(这反过来会导致observe触发)。

因此，只需传递$timeout依赖项：

myApp.controller('myCtrl', ['$scope', '$log', '$timeout', function ($scope, $log, $timeout) {...}

并切换超时呼叫：

$timeout(turnToggleOff, 2000);

这是一个更新小提琴