在更改父范围时更新 angularJs 指令范围变量

Question

我正在 angularJS 中创建一个将替换元素的指令。我在父作用域中有一个绑定到元素的变量。

我想在更改父范围变量值时更新指令范围变量。

元素如下所示

<my-element attr-xyz="scope_variable"></myelement>

当我编写如下指令时，它会在范围变量更新时给出更新的值

.directive('myElement', function(){
    return function(scope, elem, attr){
        scope.$watch(attr.attrXyz, function(value) {
            console.log(value);
        });
    }
});

但是当我编写如下相同的代码时，它会给出未定义的值

return {
    scope: {attrXyz: '@'},
    restrict: 'E',
    replace: true,
    link: function(scope, element, attr, controller){
        scope.$watch(attr.attrXyz, function(value){
            console.log('value = '+value);
        });
    }
}

Answer 1

两种方式都可以。 （指令 1-2）http://plnkr.co/edit/2kJT1mkaORsS8RUOyZ0N?p=preview

但是，如果您引入孤立的范围 - 第二种方式不起作用。 （指令 3）

然后你可以使用$observe（指令4）

  attr.$observe('attrXyz', function(value){
      console.log('4: '+ value);
  });

或者你可以在范围内定义它并使用watch。

Answer 2

我建议你只使用ng-attr

<my-element ng-attr-xyz="scope_variable"></myelement>

仅当您确实需要在该值更改时触发指令中的函数/验证时才使用$observe 和$watch，否则您只是为此添加侦听器并且更易于维护以使用模板中的属性。