从AngularJS 1.5中的子指令访问父指令控制器

Question

我试图从子指令访问父指令的控制器，但到目前为止没有成功。

我有这种父指令：

(function() {
    'use strict';

    angular
        .module('app.mybusiness.shared')
        .directive('pkPage', pkPage);

    /* @ngInject */
    function pkPage() {
        var directive = {
            restrict: 'E',
            scope: true,
            controller: 'PkpageController',
            controllerAs: 'pageCtrl',
            templateUrl: 'app/mybusiness/shared/pkpage/pkpage.tmpl.html'
        };
        return directive;
    }
})();

这是父指令的控制者：

(function() {
    'use strict';

    angular
        .module('app.mybusiness.shared.pkpage')
        .controller('PkpageController', Controller);

    /* @ngInject */
    function Controller($filter, API, ToastService) {
        var vm = this;
        vm.$filter = $filter;
        vm.API = API;
        vm.ToastService = ToastService;
        vm.clickedRow = null;

        vm.reset = function() {
            vm.pkForm.$setPristine();
            vm.pkForm.$setUntouched();
            vm.title = vm.addTitle;
        };

        vm.setContent = function(content) {
            vm.content = content;
            console.log(vm.content);
        };

        vm.save = function() {
            if (vm.clickedRow === null) {
                vm.promise = vm.API.all(vm.resource).post(vm.content);
                vm.promise.then(function () {
                    vm.ToastService.show(vm.$filter('translate')(vm.addMsg));
                    vm.refresh();
                })
            }
            else {
                vm.promise = vm.content.put();
                vm.promise.then(function () {
                    vm.ToastService.show(vm.$filter('translate')(vm.updMsg));
                    vm.refresh();
                })
            }
        };

        vm.refresh = function() {
            vm.promise = vm.API.all(vm.resource).getList();
            vm.promise.then(function (response) {
                vm.contents = response;
            })
            vm.reset();
        };

        vm.destroy = function() {
            vm.promise = vm.content.remove();
            vm.promise.then(function () {
                vm.ToastService.show(vm.$filter('translate')(vm.delMsg));
                vm.refresh();
            })
        };
    }
})();

父指令模板：

<md-content class="padding-normal">
    <div ng-hide="vm.contents.length === 0">
        <p class="md-headline" translate>{{vm.tableTitle}}</p>
        <pk-table 
            columns = "vm.columns" 
            contents = "vm.contents"
            page-size = "10" 
            on-unselection = "vm.reset()"
            on-selection = "vm.setContent(selectedContent)"
            >
        </pk-table>
    </div>
    <p class="md-headline padding-top-10 padding-bottom-10" translate>{{vm.title = vm.selectedRow ? vm.editTitle : vm.addTitle}}</p>
    <pk-form
        input-content = "vm.content"
        on-update = "vm.save(newContent)"
        on-delete = "vm.destroy(content)"
        template-url = "ex-puoliso">
    </pk-form>
</md-content>

这是子指令（或其中的一部分）：

(function() {
    'use strict';

    angular
        .module('app.mybusiness.shared.pktable')
        .directive('pkTable', pkTable);

    /* @ngInject */
    function pkTable($filter, API) {
        var directive = {
            restrict: 'E',
            scope: {
                columns: '=',
                contents: '=',
                filters: '=',
                onSelection: '&',
                onUnselection: '&'
            },
            link: link,
            templateUrl: 'app/mybusiness/shared/pktable/pktable-directive.tmpl.html'
        };
        return directive;

        function link($scope, $element, attrs) {

    ......................

            // init custom variables
            $scope.clickedRow = null;


            $scope.onRowClick = function(content) {
                $scope.content = angular.copy(content);
                if ($scope.clickedRow === $scope.content.id) {
                    $scope.clickedRow = null;
                    $scope.content = null;
                    $scope.onUnselection();
                }
                else {
                    $scope.clickedRow = $scope.content.id;
                    $scope.onSelection({selectedContent: $scope.content});
                }
                // console.log($scope.content);
            };
        }
    }
})();

如果单击未选中的tablerow，onRowClick函数将运行onSelection函数，该函数是子指令范围绑定和属性之一。在父指令模板中，onSelection属性设置为运行父指令（pkPage）控制器的vm.setContent（）函数。

但是当点击tablerow时，浏览器控制台中没有输出（vm.content或errors）。在我看来，vm.setContent（）函数根本不会触发。你知道我错过了什么吗？

BUT：

如果我将vm.setContent（）函数移动到ui-router状态控制器，函数会在tablerow点击时按预期运行！

这是我的ui-router状态配置：

(function() {
    'use strict';

    angular
        .module('app.mybusiness.customer-forms.permium')
        .config(moduleConfig);

    /* @ngInject */
    function moduleConfig($translatePartialLoaderProvider, $stateProvider) {
        $translatePartialLoaderProvider.addPart('app/mybusiness/customer-forms');

        $stateProvider
        .state('triangular.customer', {
            url: '/premiums',
            views: {
                '': {
                    resolve: { /* @ngInject */
                        contents: function (API) {
                            return API.all('customer/premiums').getList();
                        }
                    },
                    template: '<pk-page></pk-page>',
                    controller: 'premiumController',
                    controllerAs: 'vm'
                }
            }
        });
    }
})();

在permiumController中，我拥有相应案例的所有业务数据，并且可以毫无问题地访问子指令的数据。但由于DRY ......我不想将所有父指令功能移到业务控制器上。

希望你能掌握我的情况......

角度1.5.5 angular-ui-router 0.3.1