Это контроллер основного шаблона:
app.controller('OverviewCtrl', ['$scope', '$location', '$routeParams', 'websiteService', 'helperService', function($scope, $location, $routeParams, websiteService, helperService) {
...
$scope.editWebsite = function(id) {
$location.path('/websites/edit/' + id);
};
}]);
Это директива:
app.directive('wdaWebsitesOverview', function() {
return {
restrict: 'E',
scope: {
heading: '=',
websites: '=',
editWebsite: '&'
},
templateUrl: 'views/websites-overview.html'
}
});
Вот как эта директива применяется в основном шаблоне:
<wda-websites-overview heading="'All websites'" websites="websites" edit-website="editWebsite(id)"></wda-websites-overview>
и этот метод вызывается из шаблона директивы (website-overview.html):
<td data-ng-click="editWebsite(website.id)">EDIT</td>
ВОПРОС: При нажатии EDIT в консоли появляется эта ошибка:
TypeError: нельзя использовать оператор "in" для поиска "editWebsite" в 1
Кто-нибудь знает, что здесь происходит?
источник
hideDialog
функция принимает сообщение для отображения, когда диалог скрыт. Это указывается в директиве путем вызоваclose({message: 'closing for now'})
. Тогда локальная переменнаяmessage
будет доступна вon-close
выражении. "[emph mine] Истина страннее вымысла. Хотелось бы знать, как они выбрали это как лучшее решение для обработчиков событий.TL; DR; - Вы предполагаете, что связанная функция передается дочернему компоненту. Это неверно. Фактически, AngularJS анализирует шаблон строки и создает новую функцию, которая затем вызывает родительскую функцию.
Эта функция должна получать объект с ключами и значениями, а не простую переменную.
Более длинное объяснение
Это происходит, когда вы связали функцию с помощью '&' и попытались вызвать эту функцию из своего контроллера, передав простую переменную, а не объект, содержащий имя простой переменной. Ключи объекта необходимы шаблонизатору, чтобы решить, как передавать значения в связанную функцию.
например. ты позвонил,
boundFunction('cats')
а неboundFunction({value: 'cats'})
Пример работы
Скажем, я создаю такой компонент:
const MyComponent = { bindings: { onSearch: '&' }, controller: controller };
Эта функция (в родительской) выглядит так:
onSearch(value) { // do search }
В моем родительском шаблоне я теперь могу сделать это:
<my-component on-search="onSearch(value)"></my-component>
Привязка здесь будет проанализирована из строки. Фактически вы не передаете функцию. AngularJS создает для вас функцию, которая вызывает эту функцию. Привязка, созданная в шаблоне, может содержать много чего, кроме вызова функции.
AngularJS каким-то образом нужно решить, откуда взяться
value
, и он делает это, получая объект от родителя.В контроллере myComponent мне нужно сделать что-то вроде:
handleOnSearch(value) { if (this.onSearch) { this.onSearch({value: value}) } }
источник
boundFunction('cats')
скорее позвонили , чемboundFunction({value: 'cats'})
»