1

我正在尝试编写一个名为“foo”的组件-该组件带有一个标签，并说“hello {{$ctrl.label}}”。它还在点击时调用回调函数

<foo label="'bar'" callback="$ctrl.myCallback()"</foo>

到目前为止一切都很好。我的控制器确实得到了回调

所以现在我把这个元素放到一个 ng-repeat 中： <foo ng-repeat="item in $ctrl.items" label="item.label" callback="$ctrl.myCallback(item)></foo>

如何在组件中定义单击时要传回控制器的内容？该组件没有item传递给它，只有“标签”。

根据我所读到的，我需要说一些类似的话 this.callback({item: SomeObject});

我在这里有 2 个问题：1）组件如何知道它需要提供“item”键和 2）组件如何知道 SomeObject 是什么？

我可以轻松地在另一个 ng-repeat 中重用该组件： <foo ng-repeat="order in $ctrl.orders" label="order.orderNum" callback="$ctrl.myCallback(order)></foo>

在这种情况下，组件如何知道将订单对象作为参数发送给点击回调函数？

4

1 回答 1

4

组件对此知之甚少，您知道，您的单元测试知道并且您的 e2e 测试知道（可能是），但组件只知道它有一个回调（带有命名参数）和一个属性及其way-binding，这就是需要进行绑定。此外，您不必从组件端传递任何内容，除非您从组件发送项目对象，否则，只需使用绑定将从范围$ctr.callback()调用的简单对象。$parent.myControllerFunction(item)ng-repeat

使用时&，根据您在模板上创建的掩码创建要从组件调用的委托方法。例如：

<ANY ng-repeat="item in items" callback="myCallBack(item)">
...
bindings: {
    callback: '&'
}
...

如果从组件中调用它$ctrl.callback()，它将使用ng-repeat范围中的项目。但是，如果您想从组件发送它，那么您必须传递一个对象，该对象具有您在模板上使用的参数的名称，例如$ctrl.callback({ item: { name: 'foo'}})填充在 上声明的参数callback="myCallBack(item)"。

angular
  .module('mBoard', [])
  .component('widget', {
    bindings: {
      item: '=',
      callback: '&'
    },
    controller: function() {

      var $ctrl = this;

      $ctrl.save = function() {
        //$ctrl.callback();
        $ctrl.callback({ item: { name : $ctrl.item.name + '%%%%' }});

      }
    },
    templateUrl: 'template.html'
  })
  .controller('mBoardCtrl', function mBoardCtrl($interval, $scope) {
    $scope.items = [{name: 'uno'}, {name: 'dos'}, {name: 'tres'}];
    $scope.setItem = function(item) {

      console.log(item)
    }
  });

/* https://docs.angularjs.org/guide/bootstrap */
angular.bootstrap(document, ['mBoard']);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<div ng-controller="mBoardCtrl ">
  <widget ng-repeat="item in items" item="item" callback="setItem(item)"></widget>
  <hr>
  <widget ng-repeat="item in items" item="item" callback="setItem('quatorze')"></widget>


  <!-- https://docs.angularjs.org/api/ng/service/$templateCache -->
  <script type="text/ng-template" id="template.html">
    <button type="button" ng-click="$ctrl.save()">{{ $ctrl.item.name }}</button>
  </script>
</div>

于 2016-11-11T15:16:11.637 回答