在AngularJS中，没有隔离作用域的指令范围属性。

19 浏览
0 Comments

在AngularJS中，没有隔离作用域的指令范围属性。

是否有一种方法可以在继承父作用域的同时通过传递的属性来进行扩展？

我想直接从模板中向可重用的指令传递参数，而不必在链接函数中修改DOM。

例如：

对于这样的指令：

    
      
        @

ng-model在父作用域中，此处控制整个表单，但我认为将样式属性存储在控制器中是不必要的。

是否有一种在模板中直接传递参数而不创建隔离作用域的方法？

0

2 答案

0 Comments

问题的出现原因是在AngularJS中，如果在指令中没有使用隔离作用域(isolated scope)，则不能直接扩展父作用域。然而，可以通过在指令的link函数中使用指令标签属性来实现目标。解决方法是在link函数中使用$attributes参数来获取指令标签的属性，并将其赋值给$scope.label变量。具体代码如下：

link: function ($scope, $element, $attributes) {
    $scope.label = $scope.$eval($attributes.label);
}

通过访问下面的链接可以查看一个实时演示：

[http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview](http://plnkr.co/edit/2qMgJSSlDyU6VwdUoYB7?p=preview)

如果要传递一个字面量(literal)，可以直接使用$attributes参数中提供的值，而不需要调用$scope.$eval函数。这样可以避免指令的使用者必须用引号包裹所有的值。具体做法可以参考[stackoverflow.com/a/15671573/3123195](http://stackoverflow.com/a/15671573/3123195)。

以上就是在AngularJS中使用没有隔离作用域的指令范围属性的问题的原因和解决方法。

0
0 Comments

问题的原因是在AngularJS中，如果指令的作用域没有被隔离，那么在指令中使用的属性如果发生变化，作用域中的变量将不会自动更新。

解决方法是将属性值作为字符串传递，而不是传递引用。在指令中使用$observe方法监听属性的变化，并更新作用域中的变量。

以下是解决方法的代码示例：

在指令中添加$observe方法监听属性的变化，并更新作用域中的变量：

$attributes.$observe('label', function(newValue){
    $scope.label = newValue;
});

通过这种方式，如果属性值发生变化，作用域中的变量将会动态更新。

以上方法可以实现双向数据绑定，而且不需要使用隔离作用域。

0