自定义属性双向绑定无效

Question

在这个例子中，我面临两个问题

https://jsfiddle.net/1g6kvxst/

1. 显然，<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

使用手表重新评估视图中的变量。这些手表是在角的异步函数中构建的，如$timeout、$http等。当使用本机setTimeout时，setTimeout的摘要周期不会捕捉到这种变化；

使用角的$interval服务而不是本机javascript间隔：

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

不要忘记注入控制器：

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

要使$watch工作，请注意键而不是对象：

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

JSFIDDLE

Answer 2

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