Angular '&' 绑定和参数

Question

我正在尝试编写一个名为 "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 传递给它，只有 "label"。

根据我读到的内容，我需要说些类似的话 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>

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

Answer 1

组件不太了解它，你知道，你的单元测试知道，你的端到端测试知道（可能），但组件只知道它有一个回调（带有命名参数）和一个属性和它们的 way-binding，这就是进行绑定所需要的。此外，您不必从组件端传递任何内容，除非您从组件发送 item 对象，否则，只需使用一个简单的 $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>

Angular '&' 绑定和参数

Angular '&' Binding and parameters

angularjs

angular-components