具有作用域的指令的AngularJS $watch控制器变量

Question

从指令中，我希望使用$watch跟踪对控制器变量的更改。我创造了这个弹琴。(https://jsfiddle.net/hqz1seqw/7/)

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

我希望两个指令$watch都能启动，但是，我只能让其中一个指令(即dir-2)启动。不知道我需要改变什么。这与孤立的范围有关吗？有更好的方法吗？

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

这与孤立的范围有关吗？

问题在于，dir-one将其作用域与父范围分离。在这种情况下可以采取一些替代办法，例如：

scope.$watch('$parent.tempformat', function(nv){ //...

它将查找指定内容的父级。

另一种选择是绑定到directive本身：

scope: {
        info: '=', 
        tempformat: '='
    },

然后在html中：

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

有关详细信息，请参阅：文献资料。特别是隔离了指令区域的范围。

有更好的方法吗？

通常，隔离作用域有助于构造可重用组件(如文档中所述)，因此如果这是正在尝试的东西(从答案中指出的内容)，那么我将支持类似于第二个选项的内容，您可以在directive本身上指定监视内容，并认为这样做的“更好”方式。

根据我的经验(这完全是我自己的喜好)，我会将它绑定到directive，因为我通常出于某种原因隔离我的作用域。