javascript - 从嵌套指令调用 Controller $scope 方法

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>

在第二个指令模板中，我包含了一个基于 Controller $scope 模型的动态模板。在该模板和指令模板中，我想从 Controller $scope 调用一个函数。有办法实现吗？

Answer 1

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