javascript - 在 AngularJS 中，$scope 是如何传递给 scope 的？

Question

我对在 Controller 中使用 $scope 和在指令中使用 scope 感到有点困惑。请验证我的理解是否正确(并提供一些替代方法)。

假设我有一个 html:

<div ng-controller="app1_Ctrl">
    .
    .
    .
    <input type="text" ng-model="value"/>
    <input type="checkbox" />
    <button ng-click="submit()"></button>

</div>

还有我的 main.js

(function() {

   angular.module('mainApp', ['app1']);

})();

我的 app1 看起来像这样(基于 AngularJS 官方文档 here )

(function() {

    var app = angular.module('app1', []);

    app.controller('app1_Ctrl', ["$scope", function($scope) {
        .
        .
        .
    }]);

    app.directive('app1_Dir1', [function() {

        function link(scope, element, attr) {

            scope.$watch(attr.someAttrOfCheckBox, function() {
                // some logic here
            });

            function submit() {
                // some logic here
            }


        }

        return link;

     }]);

})();

$scope.value 如何在指令的范围内传递，以便我可以在那里进行一些操作？ ng-click 会在指令链接中触发函数 submit() 吗？使用 scope.$watch 来监听复选框元素中的操作(当然是勾选还是未勾选)是否正确？

非常感谢那些可以解释的人。

Answer 1

默认情况下，指令作用域是controller $scope；但这意味着该指令直接依赖于您的 Controller ，并且您需要为要使用的指令的每个实例使用不同的 Controller 。通常认为最好的做法是隔离您的指令范围并专门定义您希望从 Controller 传递给它的变量。为此，您需要在指令中添加范围声明:

scope {
   label :'@',
   context : '=',
   function : '&'
}

并更新你的观点:

<my-directive label="labelFromController" context="ctxtFromController" function="myFunction()" ></my-directive>

这些符号表示您希望传递的事物类型:@ 用于单向绑定(bind)(作为指令中的字符串)，= 用于两个- 对象的绑定(bind)(这使指令能够更新 Controller 中的某些内容)，而 & 用于传递函数。Angular 文档 https://docs.angularjs.org/guide/directive 对许多其他选项和细节进行了最好的解释。 .还有一些不错的教程(例如 http://www.sitepoint.com/practical-guide-angularjs-directives/ )

• 您的 submit() 函数没有附加到任何东西，因此您将无法从您的查看器调用。如果您希望访问它，您需要在链接函数中将其定义为 scope.submit = function() ...。
• 你可以使用 $watch 来做这种事情，但通常还有其他更优雅的方法来实现这一点，利用 Angular 已经“观察”它所知道的变量并监视他可以监视的任何变化(这可以例如，当某些外部服务更改数据时会成为一个问题，因为 Angular 无法监听它不知道的事件)。在这里，您可以简单地将 ng-model 指令关联到您的输入复选框以存储其真/假(选中/未选中)值，以及 ng-change 或 ng-click 指令对其进行操作。最佳解决方案主要取决于您的业务逻辑的确切性质。

一些额外的想法:

• 指令的 HTML 内部应该打包到内联 template 字段中，或者打包到由指令中的 templateUrl 字段引用的单独的 HTML 文件中。
• 在上面的 HTML 代码中，没有任何地方引用您的指令。它应该是一个元素、属性或类(并且您的指令定义应该反射(reflect)它的调用方式，使用 restrict 字段)。也许您省略了包含指令 HTML 的行，但就目前而言，您的指令不会执行任何操作。
• 据我所知，您不需要返回链接。将其视为指令的“主体”，您可以在其中定义将在 HTML 中调用的变量和函数。
• 您的指令实际上并不需要 HTML 代码，如果您朝不同的方向前进，上述想法可能无关紧要，但封装某种您想要重用的 View 行为可能是指令的最常见用法。