在AngularJS中，如何将$ scope传递给作用域？

Question

我在控制器和在指令范围内使用$范围的有点糊涂了。 请验证我的理解是否正确（并提供一些替代方法来实现此目的）。

假设我有一个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官方文档）

(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是否会在指令链接中触发函数commit（）？ 使用scope。$ watch侦听复选框元素中的动作（当然是勾选或取消勾选）是否正确？

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

Answer 1

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

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

并更新您的视图：

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

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

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

其他一些想法：

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