Мне интересно, считал ли это наилучшей практикой минимизацию количества директив, используемых в моем собственном шаблоне шаблонов.
Возьмем пример. Скажем, я строю директиву для макетов макетов и позволяю пользователю выбрать один из них. Это может выглядеть так:
function SelectCurrencyDirective(){
return {
restrict: 'E',
scope: {
currencies: '<',
onChange: '&'
},
template: [
'<div class="someContainer">',
'<div ng-repeat="currency in currencies track by currency.symbol" ng-click="ctrl.updateSelected(currency)">{{currency.symbol}}</div>',
'</div>'
].join(''),
controller: SelectCurrencyCtrl,
controllerAs: 'ctrl'
}
}
SelectCurrencyCtrl.$inject = ['$scope']
function SelectCurrencyCtrl($scope){
var ctrl = this;
// We need to unwrap the function first
$scope.onChange = $scope.onChange();
ctrl.updateSelected = function(currency){
ctrl.selected = currency;
$scope.onChange(currency); // activate the callback
}
}
Здесь я использую ng-click
изнутри шаблона. Но я мог бы написать функцию ссылки и прослушать событие click, используя что-то вроде element.on('click', doSomething)
.
Мой вопрос таков: лучше ли использовать функцию связи над ng-click? Зачем? Существует ли ограничение производительности для использования решения ng-click, а не функции ссылки?
Когда вы находитесь в AngularJS, я считаю, что лучше использовать угловые директивы. Таким образом, AngularJS знает, как отслеживать изменения модели. Если модель изменится, то AngularJS повторно отобразит DOM.
Так, например
ctrl.updateSelected = function(currency){
ctrl.selected = currency;
$scope.selectedCurrency = currency; // change on $scope
}
и в вашем HTML
<p>10{{selectedCurrency.symbol}}</p>
Таким образом, DOM будет изменен и отображен новый символ валюты.