Question

在我的角度为1.5的应用程序中，有两个组件。父母一个：

angular.
module('myApp').
component('myContainer', {
    bindings: {
        saySomething: '&'
    },
    controller: ['$scope', function MyController($scope) {
        var containerCtrl = this;
        containerCtrl.saySomething = function saySomething() {
            containerCtrl.sentence = "Hello, world";
            console.log(containerCtrl.sentence);
        };
    }]
});

还有一个孩子：

angular.
module('myApp').
component('myButton', {
    bindings: {
        onClick: '&'
    },
    template:
    '<div>' +
        '<a class="button" href="#">Say Something</a>' +
    '</div>'
});

这是我的index.html：

<my-container>
    <my-button ng-click="$ctrl.saySomething()"></my-button>
</my-container>

问题是：如何通过单击子组件中的按钮从父组件调用函数saySomething（）？现在它不起作用。我见过类似的问题here，但这并没有解决我的问题。在此先感谢您的帮助！

P.S。如果有任何类似的问题，请告诉我。 Tnanks！

Answer 1

您可以在子组件中require父控制器，然后调用其方法。

angular.module('demoApp', [])
  .component('myContainer', {
    ...
  })
  .component('myButton', {
    require: {
      parentCtrl: '^myContainer'
    },
    template: '<div>' +
      '<a class="button" href="#" ng-click="$ctrl.parentCtrl.saySomething()">Say Something</a>' +
      '</div>'
  });

这里是demo

并链接到documentation

Answer 2

事情是它只适用于单向绑定值

   mod.component('myCmp', {
      template: '<h1>{{$ctrl.name}}</h1>',
      bindings: {
        name: '<'
      },
      controller:  {
      this.$onChanges = function (changesObj) {
        if (changesObj.name) {
         ...fire some function
        }
      };
    }
    });

Answer 3

我很晚才参加派对，但我觉得有更好的办法来解决这个问题，这里有一个小例子：

(function() {
    var app = angular.module('app');
    app.component('reportPrintButton', {
        template: [
            '<button class="btn btn-info" ng-click="$ctrl.onClick()">',
                '<span class="glyphicon glyphicon-print"></span> {{ $ctrl.name }}',
            '</button>'
        ].join(''),
        bindings: {
            name: '@',
            onClick: '&'
        },
        controller: reportPrintButton
    });

    reportPrintButton.$inject = [];

    function reportPrintButton() {
        var ctrl = this;
    }
})();

Angular 1.5。 |从父组件中单击子组件调用一个函数？

3 个答案: