javascript - 在 AngularJS 中，$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)-way 对象绑定(bind)(使指令能够更新 Controller 中的某些内容)，& 用于传递函数。 还有很多其他选项和微妙之处，Angular 文档 https://docs.angularjs.org/guide/directive 对此做了最好的解释。 。还有一些不错的教程(例如 http://www.sitepoint.com/practical-guide-angularjs-directives/ )

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

一些额外的想法:

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