Question

我正在学习角度，我来自jQuery背景，面对问题以保持角度。所以我经常偶然发现角度代码中有很多东西。

刚看到下面的代码，我不明白以下指令的作用范围是什么？

但是如果我从下面的指令中删除范围那么什么不起作用？所以如果可能的话，请帮我理解范围的用法及其重要性。感谢

<li my-directive price="item.price" ng-repeat="item in products">{{item.name}} &mdash; {{item.price}}</li>

    myApp.directive('myDirective', function(){
      return {
        scope: { price: '=' },
        require: 'ngModel',
        link : function(scope){
          console.log(scope.price)
        },
        controller: function(scope, element, attrs, ngModel){
          console.log(ngModel.price);
          console.log(scope.price);
        }
      }
    });

Answer 1

在该示例中，您有scope: { price: '=' }，指出指令的内部范围变量price与父范围完全绑定。它可以访问它并且我更改了父范围的变化，指令的price值也会发生变化。

从指令scope: { ... }中删除此行，然后您的指令将不会创建新范围。但它仍然有效 - 这意味着它不会产生错误。当您需要或不需要isolated scopes时，有一些用例。

要更好地了解角度和范围的工作原理 - 请查看以下优秀资源：

angular vs jQuery - "Thinking in AngularJS" if I have a jQuery background?
$范围本身角度 - How does data binding work in AngularJS?
指令中的各种范围变量 - What is the difference between '@' and '=' in directive scope in AngularJS?

Answer 2

如果你没有提到你的指令将使用的范围配置对象是父的范围，但是当你提到范围对象时，它会创建自己的孤立范围。

因此，如果您没有提及范围对象，您可以直接从父控制器访问变量。

参考：http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

AngularJS中指令范围内的作用是什么

2 个答案: