Angular自定义指令中无法监听注入的作用域值变化问题

嘿，我瞅了下你的代码，发现两个关键问题导致你没法监听到val的变化，咱们一步步来修复：

问题1：属性名不匹配 #

你在模板里给指令绑的是values='val'，但在指令的link函数里却去监听attrs["val"]——这俩名字完全对不上啊！应该是attrs.values才对。

问题2：直接监听字符串表达式无效 #

就算你改成attrs.values，直接把它传给$scope.$watch也不行，因为attrs.values拿到的是字符串"val"，而不是父作用域上的val变量。这时候得用$parse服务把字符串表达式解析成能访问作用域变量的函数，或者用Angular指令更推荐的作用域绑定方式。

方案1：修复$watch的写法（用$parse解析） #

修改指令的link函数，先解析表达式再监听：

demo.directive('myDir', function($parse) { 
  return { 
    restrict: "E", 
    template: 'template', 
    link: function(scope, element, attrs){ 
      // 解析values属性对应的表达式
      var valGetter = $parse(attrs.values);
      // 监听解析后的表达式，获取实际变量值
      scope.$watch(valGetter, function(newval, oldval){
        console.log(newval, oldval);
      });
    } 
  } 
});

方案2：用隔离作用域绑定（更推荐） #

Angular指令的最佳实践是通过scope属性绑定外部值，代码更简洁且符合框架设计思路：

demo.directive('myDir', function() { 
  return { 
    restrict: "E", 
    template: 'template', 
    // 用=实现双向绑定，对应模板里的values属性
    scope: {
      values: '=' 
    },
    link: function(scope, element, attrs){ 
      // 直接监听指令作用域上的values变量
      scope.$watch('values', function(newval, oldval){
        console.log(newval, oldval);
      });
    } 
  } 
});

改完之后，当你触发$scope.val = "changes"时，指令里的watch就能捕获到值的变化并打印到控制台了。如果不需要双向绑定，只是单向监听父作用域的值，也可以把=换成@，不过这里用=更贴合你的需求。

内容的提问来源于stack exchange，提问作者Kbvin