javascript - 如何使 AngularJS 指令在不隔离范围的情况下明确定义其依赖项

Question

我在编写我的应用程序指令时使用隔离范围来明确定义其在父范围中的依赖项。所以我总是可以在我的 HTML 组件中实现这一点

<my-directive dependency-one="x" dependency-two="y"></my-directive>

这是我的指令的代码

angular.module("myapp").directive('myDirective', [function() {
    return {
        restrict: 'E',
            scope: {
                dependencyOne: '=',
                dependencyTwo: '='
            },
            templateUrl: "path/to/myDirective.html",
            link: function($scope){
                //here goes the code for linking function
            }
    }
}]);

但是，我在 AngularJS 社区中阅读了一些最佳实践，指出我们应该尽可能避免使用 Isolated Scope，因为它会增加应用程序的观察者和无用的绑定(bind)。仅在编写可在应用程序中重用的组件时使用 Isolated Scope。

据我所知，我们有两种可能性:

• 我们的指令不创建子作用域
• 我们的指令创建一个子作用域，它是原型(prototype)继承父作用域

我们可以通过这种方式防止创建新的范围和不必要的绑定(bind)，但是它会降低指令的 HTML 标记的可读性和清晰度，现在我们只有这样的东西:

<my-directive></my-directive>

看着这段代码，我不知道指令执行需要什么，这与 AngularJS 引入的“声明式 html”的优势背道而驰。

有人对这个问题感兴趣吗？

Answer 1

如果没有 Isolated scope，就很难有一个清晰的 Directive API。 因此，我并不完全同意“我在 AngularJS 社区中阅读了一些最佳实践，指出我们应该尽可能避免使用 Isolated Scope，因为它会增加应用程序的观察者和无用的绑定(bind) "

如果你想要明确的依赖关系，你必须选择独立的范围。 有一些方法可以减少 watch 和绑定(bind)的数量。 在这种情况下，以下 url 上的内容可能会有所帮助。 @ http://csharperimage.jeremylikness.com/2014/11/the-top-5-mistakes-angularjs-developers.html