Question

我正在尝试通过模板将回调绑定到组件。该模板包含另一个指令的实例。这似乎不起作用。我从一个模态调用指令，不确定这是否会导致问题。我尝试了之前问题中提出的许多解决方案但仍然没有运气。我用调试器和＆＃39; $ ctrl.onSelectionChanged＆＃39;运行它。被定义为应该：

function (locals) { return parentGet(scope, locals); }

我的代码：

MY-component.js：

内部指令作为没有对回调的引用，它应该有吗？

angular.module('myModule')
.component('myComponent', {
    template: '<div class="container-fluid"> <inner-directive><button class="btn btn-default center-block" ng-click="$ctrl.onSelectionChange({items_list: $ctrl.selectedItems})">Button</button> </inner-directive> </div>',
    bindings: {
        $router: '<',
        onSelectionChange: '&'
    },
    controller: MyComponentController
});


/* @ngInject */
function MyComponentController(MyService, $filter, $log, $q) {
    var $ctrl = this;

    $ctrl.$routerOnActivate = function () {

    };

    $ctrl.selectedItems = [];
}

调用组分-controller.js：

function CallingComponentCtrl(toastr, $scope, $uibModal, $log) {
    var $ctrl = this;

    $ctrl.loadDone = false;

    $ctrl.grid = {
        enableSorting: true,
        data: [],
        columnDefs: [
            {name: 'id'},
            {name: 'name'},
            {name: 'description'}
        ],
        enableRowSelection: true,
        enableRowHeaderSelection: false,
        multiSelect: false,
        noUnselect: true,
        onRegisterApi: function (gridApi) {
            $ctrl.gridApi = gridApi;
        }
    };

    this.$onInit = function () {
        if (angular.isUndefined($ctrl.abc)) {
            return;
        }
        syncData();
        $ctrl.loadDone = true;
    };

    this.$onChanges = function () {
        // TODO
    };

    function syncData(){
        $ctrl.grid.data = $ctrl.abc;
    }

   $ctrl.myFoo = function(items_list) {
        alert("This is never happening");
    };


 $ctrl.onPress = function (event) {
        var modalInstance = $uibModal.open({
            template: '<my-component on-selection-change="$ctrl.myFoo(items_list)"></my-component>',
            windowClass: 'modal-window'
        });
    };

}

有什么想法吗？

Answer 1

使用$ compile服务

link: function(scope, element) {
  var template = $compile('<div class="container-fluid"> <inner-directive><button class="btn btn-default center-block" ng-click="$ctrl.onSelectionChange({items_list: $ctrl.selectedItems})">Button</button> </inner-directive> </div>')(scope);
  element.append(template);
}

请记住将编译服务注入指令函数

Answer 2

尝试将您的子组件更改为：

.component('myComponent', {
    template: '<div class="container-fluid"> <inner-directive><button class="btn btn-default center-block" ng-click="$ctrl.onSelectionChange({items_list: $ctrl.selectedItems})">Button</button> </inner-directive> </div>',
    bindings: {
        $router: '<'
    },
    require: {
        parent: '^^CallingComponent'
    },
    controller: MyComponentController
});

使用require继承父控制器。然后在init函数中，您可以进行调用：

function MyComponentController(MyService, $filter, $log, $q) {

    this.$onInit = function() {
        this.parent.myFoo(items_list);
    }

    var $ctrl = this;
    $ctrl.$routerOnActivate = function () {};
    $ctrl.selectedItems = [];
}

- 老答案尝试将模板更改为：

<my-component on-selection-change="$ctrl.myFoo(items_list)"></my-component>

当你声明为控制器函数时，你从$ scope调用它。

Answer 3

好吧，我发现了问题。在调用模态时，我使用了一个模板，在此模板中使用了一个组件。对于组件，我传递了一个在'$ ctrl'中定义的回调。问题是模态定义了自己的范围，无法达到$ ctrl。所以我为模态定义了一个控制器，并通过它调用了我需要的函数。这是我的解决方案，我强调了这些变化并添加：

调用组分-controller.js：

function CallingComponentCtrl(toastr, $scope, $uibModal, $log) {
    var $ctrl = this;

    ....

   $ctrl.myFoo = function(items_list) {
        alert("This is never happening");
    };


    $ctrl.onPress = function (event) {
        var modalInstance = $uibModal.open({
            template: '<my-component on-selection-change="$ctrl.myNewFoo(items_list)"></my-component>',
            **controllerAs: '$ctrl',**
            windowClass: 'modal-window',
            **controller: function($uibModalInstance){
                var $ctrl = this;
                $ctrl.myNewFoo= function(items_list) {
                    $uibModalInstance.close(items_list);
                };
            }**
        });
        **modalInstance.result.then(function(items_list) {
              $ctrl.myFoo(items_list);
          });**
    };

}

通过Angular中的模板标记将回调绑定到指令

3 个答案: