Question

我对控制器中 $ 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（）吗？使用范围是否正确。$ watch在checkbox元素中侦听一个动作（当然是勾选或未勾选）？

非常感谢能够解释的人。

Answer 1

默认情况下，指令范围是控制器$ scope;但这意味着该指令直接依赖于您的控制器，并且您需要为要使用的指令的每个实例使用不同的控制器。通常认为最佳做法是隔离指令范围，并专门定义要从控制器传递的变量。为此，您需要在指令中添加范围语句：

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

并更新您的观点：

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

符号表示您希望传递的内容：@用于单向绑定（作为指令中的字符串），=用于对象的双向绑定（它使指令能够更新控制器中的某些内容），&用于传递函数。 Angular doc https://docs.angularjs.org/guide/directive最好地解释了许多其他选项和细微之处。还有一些不错的教程（例如http://www.sitepoint.com/practical-guide-angularjs-directives/）

您的提交（）功能未附加到任何内容，因此您无法从查看者处拨打电话。如果您希望访问它，则需要在链接函数中将其定义为scope.submit = function() ...。
你可以使用$ watch来做这种事情，但通常还有其他更优雅的方法来实现这一目标，因为角度已经是＆＃34;观察＆＃34;它所知道的变量并监视他可以做的任何变化（当某些外部服务更改数据时，这可能是一个问题，因为angular不能监听它没有被发现的事件）。在这里，您可以简单地将ng-model指令与输入复选框相关联，以存储其true / fale（选中/未选中）值，以及ng-change或ng-click指令以对其进行操作。最佳解决方案主要取决于业务逻辑的确切性质。

一些额外的想法：

您的指令的HTML内容应打包在内联template字段中，或打包在指令中templateUrl字段引用的单独HTML文件中。
在上面的HTML代码中，您的指令不会在任何地方引用。它应该是元素，属性或类（并且您的指令定义应该反映它可以使用restrict字段调用的方式）。也许您已经省略了包含指令HTML的行，但就目前而言，您的指令并没有做任何事情。
据我所知，您不需要返回链接。把它想象成＆＃34;身体＆＃34;您的指令，您可以在其中定义将在HTML中调用的变量和函数。
您的指令实际上并不是需要 HTML代码，如果您朝着不同的方向前进，上述想法可能无关紧要，但封装您想要重用的某种视图行为是可能是最常用的指令。

在AngularJS中，$ scope如何传递到范围？

1 个答案: