Angularjs Angular$watch不在指令更新的控制器变量上工作_Angularjs_Angularjs Directive_Angularjs Scope_Angularjs Controller_Angularjs Watch

Angularjs Angular$watch不在指令更新的控制器变量上工作

angularjs

Angularjs Angular$watch不在指令更新的控制器变量上工作,angularjs,angularjs-directive,angularjs-scope,angularjs-controller,angularjs-watch,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Controller,Angularjs Watch,我试图在控制器变量上放置一个手表，该变量使用函数映射从指令更新。变量正在控制台中更新和登录，但请注意它不起作用代码段： index.html <body ng-app="myApp" ng-controller="myCtrl"> <div> <test on-click="update()"></test> </div> app.js var myApp = angular.module('myApp', []); m

我试图在控制器变量上放置一个手表，该变量使用函数映射从指令更新。变量正在控制台中更新和登录，但请注意它不起作用

代码段：

index.html

<body ng-app="myApp" ng-controller="myCtrl">
<div>
  <test on-click="update()"></test>
</div>

app.js

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

myApp.controller('myCtrl', function($scope){

  $scope.test = {
    value: false
  };

  $scope.update = function() {
    $scope.test.value = !$scope.test.value;
    console.log("Update: " + $scope.test.value);
  };

  $scope.$watch('test', function(newVal){
    console.log("Watch: " + newVal.value);
  }, true);

});

myApp.directive('test', function($compile){
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {
      onClick: '&'
    },
        template: '<div ng-transclude=""></div>',
        link: function(scope, element, attrs) {
          var $buttonElem = $('<button>Test</button>').appendTo(element);

          $buttonElem.click(function(){
            scope.onClick();
          });
        }
  }
});

var myApp=angular.module（'myApp'，[]）；
myApp.controller（'myCtrl'，函数（$scope）{
$scope.test={
值：false
};
$scope.update=函数（）{
$scope.test.value=！$scope.test.value；
log（“更新：+$scope.test.value”）；
};
$scope.$watch（'test'，函数（newVal）{
日志（“监视：+newVal.value”）；
}，对）；
});
myApp.directive（'test'，function（$compile）{
返回{
限制：'E'，
是的，
替换：正确，
范围：{
onClick:“&”
},
模板：“”，
链接：函数（范围、元素、属性）{
变量$buttonElem=$（'Test'）.appendTo（元素）；
$buttonElem.单击（函数（）{
scope.onClick（）；
});
}
}
});

Plunker链接是：

问题是指令使用不属于AngularJS的代码引发事件，而不是在其模板中使用

ng单击。如果无法修改该指令，则将事件处理程序包装在$scope中。改为$apply
$scope.update = function() {
    $scope.$apply(function(){
        $scope.test.value = !$scope.test.value;
        console.log("Update: " + $scope.test.value);
    });
};

尝试在链接函数中调用作用域。$apply（）
。无法执行此操作。将指令视为不可更新的第三方库。@ Prateek，但可以执行<代码> $TimeOutt（函数）{$Simultua. $Apple（）；}code>在控制器更新函数中执行相同的操作（即使很难看）