在更改父范围时更新 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>

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

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

Update angularJs directive scope variable on change parent scope

javascript

mean

angularjs