Question

请参阅此示例：http://jsfiddle.net/lesouthern/rLb2pL5a/3/

这样的指令可以使用范围继承或隔离来编写。

.directive('myDirective1',function() {
    return {
        scope: {
            myDirective1Attribute1 : '=',
            myDirective1Attribute2 : '='
        },
        link: function($scope, $element, $attrs) {
            $compile($element.contents());
        }
    }
})
.directive('myDirective2',function() {
    return {
        scope : true,
        link: function($scope, $element, $attrs) {
            var _attrs = $scope.$eval($attrs.myDirective2);
            $scope.myDirective2Attribute1 = $scope.$eval(_attrs.myDirective2attribute1);
            $scope.myDirective2Attribute2 = $scope.$eval(_attrs.myDirective2attribute2);
        }
    }
})

在什么情况下使用范围继承更好？什么时候隔离范围更好？

Answer 1

我建议尽可能在指令中使用隔离范围。有两个原因。

简化组件结构。
- Angular中的指令可以被视为自定义组件，对于组件，您应该声明它的依赖关系。在范围继承的情况下，这些依赖性是隐式的，这使得它们难以跟踪。通过在隔离范围内声明的依赖关系，您将始终拥有使组件正常工作所需的事物（范围）的明确展望。
能够跨应用重用组件 如果你的组件设计得很好并且实现得很好，你不需要在范围内有一些特定的变量，你需要指定依赖项，即公共接口，它已经完成了 - 你可以按照这种方法构建可重用的组件。
更容易为简单组件而不是怪物控制器编写测试

Answer 2

使用隔离范围几乎总是更好，因为它使您的指令更可重用。该指令不需要了解有关父作用域结构的任何信息。

另一方面，如果您为某些不修改范围的jquery插件编写指令，则不需要隔离范围时会出现一些有效的情况。另请注意，每个元素只能有一个带隔离范围的指令。

Answer 3

我知道这是一个老问题，但我认为我的替代方案可以帮助面临您问题的其他用户。

我建议您在scope中使用控制器上的别名语法，而不是直接使用html。

这个less traditional syntax简化了您的代码，并且可能会让您更清楚地了解您正在尝试对读取代码的人做些什么。

来自ng-controller spec：

使用controller as

  当多个控制器应用于元素时，

显示您在模板中访问哪个控制器。



如果您将控制器编写为类，则可以更轻松地访问属性和方法，这些属性和方法将显示在范围内，   来自控制器代码内部。


因为总有一个。在绑定中，您不必担心原型继承掩盖原语。

Check out also this awesome explanation of the advantages of alias syntax

我希望它有所帮助。

最佳实践：使用指令原型范围继承与范围隔离

3 个答案: