Question

我有以下指令：

指令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调用一个函数。有没有办法实现这个目标？

Answer 1

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

Answer 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>

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

Answer 3

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

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

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

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

不要忘记宣布＆＃34;消息＆＃34;作为嵌套指令模板中的参数和html中的外部指令声明：

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

也在您的外部模板中：

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

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

3 个答案: