Угловое '&' Связывание и параметры

Question

Я пытаюсь написать компонент под названием «foo» - этот компонент принимает метку и говорит «hello {{$ ctrl.label}}». Он также вызывает функцию обратного вызова по щелчку

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

Все хорошо до сих пор. Мой контроллер действительно получить обратный вызов

Так что теперь я ставлю этот элемент в нг-повтора: <foo ng-repeat="item in $ctrl.items" label="item.label" callback="$ctrl.myCallback(item)></foo>

Как определить в компоненте, что необходимо передать обратно в контроллер на клик? Компонент не передает item, а только «метку».

Из того, что я прочитал, я должен сказать что-то вроде this.callback({item: SomeObject});

У меня 2 вопроса: 1) как же компонент знают, что он должен поставить «элемент» ключ и 2), как компонент знает, что такое SomeObject?

я мог бы легко использовать компонент в других нг-повторе: <foo ng-repeat="order in $ctrl.orders" label="order.orderNum" callback="$ctrl.myCallback(order)></foo>

и в этом случае, как же компонент знать, чтобы отправить объект заказа в качестве параметра функции обратного вызова нажмите?

Answer 1

Компонент ничего не знает об этом, знаете ли, ваш тестовый тест знает, и ваши тесты 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>