如何使 AngularJS 指令在不隔离作用域的情况下清楚地定义其依赖关系

How to make AngularJS directive to clearly define its dependencies without isolating scope

本文关键字：清楚 情况下 定义 关系 依赖 作用域 AngularJS 何使 指令 隔离      更新时间：2023-09-26

我正在编写应用程序的指令，以便利用隔离的作用域来清楚地定义其在父作用域中的依赖项。所以我总是可以在我的 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"的优势背道而驰。

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

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

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

相关文章：