2

我有以下指令：

指令 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 调用一个函数。有没有办法做到这一点？

4

3 回答 3

0

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

于 2013-05-21T12:46:02.480 回答
0

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

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

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

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

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

于 2013-05-21T13:18:02.813 回答
0

正如@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>
于 2016-01-29T09:23:02.713 回答