Question

在这个例子中我遇到了2个问题

显然<b>{{moo}}</b>未更新。表达式{{moo}}不应该是2路绑定吗？
可能是因为第一个问题，关于链接回调中指令my-var attr值的监视表达式未更新

我错过了什么？感谢您的帮助。

查看

<section ng-app="myApp" ng-controller="myController"> <div my-directive my-var="moo"></div> <span>Result:</span> <b>{{moo}}</b> </section>

指令

App.directive('myDirective', function () {
    return {
        restrict: 'A',
        scope:{
            myVar: '='
        },
        link: function (scope, element, attrs) {
            scope.$watch(scope.myVar, function() {          
                console.log('my var changed to: ', scope.myVar);
            });
        }
    };
});

控制器

var ctrls = angular.module('controllers',[]);
ctrls.controller('myController', ['$scope', function ($scope) {
    $scope.moo = 0; 
    var t = setInterval(function(){
        $scope.moo++;
    },1000);
}]);

Answer 1

使用$interval，而不是setInterval，当您使用setTimeout时，angular不会运行摘要循环，因此您的指令范围不知道任何更改。

Answer 2

Angular使用watch来重新评估视图中的变量。这些手表采用角度异步功能构建，例如$timeout，$http等。使用原生setTimeout时，角度的摘要周期不会发生变化;

使用angular $interval服务而不是原生javascript间隔：

var t = $interval(function(){
    $scope.moo++;
},1000);

别忘了注入控制器：

ctrls.controller('myController', ['$scope', '$interval', function ($scope, $interval) {

要使$watch正常工作，请注意密钥而不是对象：

scope.$watch('myVar', function() {

JSFIDDLE

自定义属性双向绑定不起作用

2 个答案: