从嵌套指令调用控制器 $scope 方法答案

【问题标题】：Call controller $scope methods from nested directives从嵌套指令调用控制器 $scope 方法
【发布时间】：2013-05-16 05:15:06
【问题描述】：

我有以下指令：

指令 1

app.directive('tableDiv', function () {
    return {
        templateUrl: 'js/directives/table-div/table-div.html',
        replace: true,
        scope: {
            table: '=',
        },
        controller: function ($scope, $element, $attrs) {

        },
        link: function postLink(scope, element, attrs) {

        }
    }
});

指令 1 模板：

    <div data-table-div-row value="row" sizes="table.tbody.sizes" ng-repeat="row in table.tbody.values">
</div>

指令 2：

app.directive('tableDivRow', function ($rootScope) {
    return {
        templateUrl: 'js/directives/table-div/table-div-row.html',
        replace: true,
        scope: {value: '=', sizes: '='},
        controller: function ($scope, $element, $attrs) {
            $scope.showInfo = function () {
                $scope.visible = true;
            };

            $scope.hideInfo = function () {
                $scope.visible = false;
            };

            $scope.hasTemplate = function() {
                return ($scope.value.template ? true : false);
            }

        },
        link: function postLink(scope, element, attrs) {
            scope.$watch(function () {
                return scope.visible;
            }, function (value) {
                if (value === true) {
                    $(element).find('div.table-row').addClass('open');
                    $(element).find('div.table-row.edit').removeClass('hidden');
                } else {
                    $(element).find('div.table-row').removeClass('open');
                    $(element).find('div.table-row.edit').addClass('hidden');

                }
            }, true);
        }
    }
});

指令 2 模板：

<div>
<div class="row-fluid">
    <div class="table-row clearfix">
        <div class="{{sizes.first}} first">{{value.display.first}}</div>
        <div ng-repeat="cell in value.display.cells" class="{{sizes.cells[$index]}}">{{cell}}</div>
        <div class="{{sizes.last}} last regular">
            <div ng-switch on="value.display.last">
                <div ng-switch-when="%editbutton%">
                    <div class="show-info closed" ng-click="showInfo()"></div>
                </div>
                <div ng-switch-default>
                    {{value.display.last}}
                </div>
            </div>
        </div>
    </div>
</div>
<div ng-if="hasTemplate()">
    <ng-include src="value.template"></ng-include>
</div>

在第二个指令模板中，我包含了一个基于控制器 $scope 模型的动态模板。在该模板和指令模板中，我想从控制器 $scope 调用一个函数。有没有办法做到这一点？

【问题讨论】：

标签： javascript mvvm angularjs

【解决方案1】：

为<ng-include src="value.template"></ng-include> 创建了一个子作用域，这意味着父函数应该在此模板中可用。换句话说，你不应该做任何事情，它会工作 - 看这个简单的例子：http://plnkr.co/edit/Es2UL09ASPSTa5Fstzjf?p=preview

【讨论】：

是的，这是真的。我的主要问题是将一个函数的引用从控制器 $scope 传递到嵌套在第一个指令中的第二个指令。

【解决方案2】：

所以，它似乎在文档中，对我来说还不够清楚。在指令声明中我需要添加：method: '&'

    scope: {
        table: '=',
        method: '&'
    },

在我调用指令的模板中，method html 属性必须在末尾有()：

<div data-table-div-row method="method()" value="row" sizes="table.tbody.sizes" ng-repeat="row in table.tbody.values"></div>

通过这种方式可以将方法传递给第二个指令。

【讨论】：

现在我有一个问题。在第二个指令的控制器中，我使用一些随机值作为参数调用该函数：$scope.expandCallback && $scope.expandCallback("text");，但该参数不会传递给控制器范围方法。 console.log(arguments) 输出一个空数组。
尝试传递{message: "text"}

【解决方案3】：

正如@Direvius 建议的那样，要从指令调用控制器范围内的方法，您必须调用传递带有参数的对象而不是参数本身的方法：

scope.method({message : "text"});

因此，要从嵌套指令调用控制器方法，您必须将参数包装在 n 个对象中：

scope.method({message : {message : "text"}});

不要忘记在嵌套指令模板中声明“消息”作为参数，并在您的 html 中声明外部指令：

<outer-directive outer-method-arg="method(message)"></outer-directive>

也在你的外部模板中：

<inner-directive inner-method-arg="method(message)"></inner-directive>

【讨论】：