Question

javascript：

var App = angular.module('App', []);

App.controller('RootCntr', function ($scope) {
    $scope.openedShelf = false;

    console.log('controller', $scope.openedShelf);

    setTimeout(function() {
        $scope.openedShelf = true;
        console.log('controller', $scope.openedShelf);
    }, 2000);
});

App.directive('shelf', function () {
    return {
        restrict: 'E',
        scope: {
            'open': '='
        },
        link: function (scope, element, attrs) {
            console.log('linked');

            scope.$watch('open', function (newVal, oldVal) {
                console.log(newVal);
                if (newVal) {
                    console.log(true, newVal);
                }
            }, true);
        }
    };
});

HTML：

<body ng-app="App">
    <div ng-controller="RootCntr">
        <shelf open='openedShelf'></shelf>
    </div>
</body>

当我在openedShelf中更改RootCntr的值时，该指令没有使用它的watch语句捕获更新。有什么想法吗？

Answer 1

因为setTimeout不执行$ apply，所以$摘要永远不会发生，并且永远不会调用观察者。将$ timeout注入控制器并使用$ timeout而不是setTimeout，就像使用setTimeout一样。 $ timeout由angular提供，它总是强制$摘要发生。

$timeout(function() {
    $scope.openedShelf = true;
    console.log('controller', $scope.openedShelf);
}, 2000);

Directive的$ watch函数没有在其范围内捕获变量

1 个答案: