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

【问题标题】：How to make AngularJS directive to clearly define its dependencies without isolating scope如何使 AngularJS 指令在不隔离范围的情况下明确定义其依赖项
【发布时间】：2015-03-24 18:15:21
【问题描述】：

我正在编写我的应用程序的指令，以利用隔离范围来明确定义其在父范围中的依赖关系。所以我总是可以在我的 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 社区中阅读了一些最佳实践，指出我们应该尽可能避免使用独立作用域，因为它会增加应用程序的观察者和无用的绑定。仅当您编写在应用程序上重用的组件时才使用独立作用域。

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

我们的指令没有创建子作用域
我们的指令创建一个子作用域，原型继承父作用域

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

<my-directive></my-directive>

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

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

【问题讨论】：

没有隔离范围仍然可以拥有属性并访问这些值。在指令的引擎盖下仍然有很多权力可以用属性做很多事情
我已经考虑过并尝试过，但我不喜欢它插入属性的方式。使用原语，可以在 HTML 上显示插值，但例如。当你想通过指令的属性传递一个对象时，它会打印出 json，在 HTML 标签中看起来很丑。
我只是提到它，因为你走到了极端，只显示一个标签。

标签： javascript angularjs angularjs-directive angularjs-scope directive

【解决方案1】：

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

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

【讨论】：