Question

从指令中，我想使用$watch跟踪对控制器变量的更改。我创造了这个jsfiddle。（https://jsfiddle.net/hqz1seqw/7/）

当页面加载时，控制器和两个指令$watch函数被调用但是当我更改单选按钮时，只调用控制器和dir-two $watch函数。为什么不调用dir-one $watch函数？

我希望两个指令$watch都能触发，但我只能将它们中的一个指向（即dir-two）。不知道我需要改变什么。它与隔离范围有关吗？有没有更好的方法呢？

AngularJS代码：

var mod = angular.module("myApp", []);
//Controller
mod.controller("myCtrl", function($scope){
   $scope.tempformat = "C";
    $scope.one="25 - dir-one";
            $scope.$watch('tempformat', function(nv){
            alert("nv from controller");
            });  
    $scope.two="35 - dir-two";
});
//dir-one directive
mod.directive("dirOne", function(){
    return{
        restrict: 'E',
        template: "<p>{{info}}</p>",
        scope: {info: '='
        },
        link: function (scope, element, attr) {
            scope.$watch('tempformat', function(nv){
            alert("nv from directive-one");
              if(scope.tempformat === "C"){
                  element.find("p").append("C");
              }
              else if(scope.tempformat === "F"){
                  element.find("p").append("F");
              }                
            });    
        }        
    }});
//dir-two directive
mod.directive("dirTwo", function($window){
    return{
        restrict: "EA",
        template: "<p></p>",
        link: function (scope, element, attr) {
          scope.$watch('tempformat', function(nv){
            alert("nv from directive-two");  
              if(scope.tempformat === "C"){
                  element.find("p").append("C");
              }
              else if(scope.tempformat === "F"){
                  element.find("p").append("F");
              }
            });          
    }
    }    
});

HTML代码：

<div ng-app="myApp" ng-controller="myCtrl">
<h2>Temperature</h2>
    <input type="radio" ng-model="tempformat" value="C"/> Celcius
    <input type="radio" ng-model="tempformat" value="F"/> Farenheit
    <dir-one info="one"></dir-one>
    <dir-two info="two"></dir-two>
</div>

Answer 1

是否与隔离范围有关？

问题在于scope.$watch('$parent.tempformat', function(nv){ //...将其范围与父级分开。在这种情况下可以做一些替代方案，例如：

directive

将查看指定内容的父级。

另一种选择是绑定到scope: { info: '=', tempformat: '=' },本身：

<dir-one info="one" tempformat="tempformat"></dir-one>

然后在html中：

directive

请参阅：the documentation了解详情。特别是隔离指令的范围区域。

有更好的方法吗？

一般来说，隔离范围有助于构建可重用的组件（如文档中所述），所以如果这是尝试的东西（从答案中注明的内容）那么我会支持第二个选项中的某些内容可以指定directive本身的观看内容，并认为＆＃34;更好＆＃34;这样做的方式。

根据我的经验，这只是我自己的偏好，我会将它绑定到{{1}}，因为我通常会将我的范围隔离开来。

AngularJS $监视控制器变量来自范围为

1 个答案: