Пользовательская директива angularjs: нужно ли минимизировать количество директив в шаблоне?

0

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

Возьмем пример. Скажем, я строю директиву для макетов макетов и позволяю пользователю выбрать один из них. Это может выглядеть так:

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-directive

1 ответ

0

Когда вы находитесь в AngularJS, я считаю, что лучше использовать угловые директивы. Таким образом, AngularJS знает, как отслеживать изменения модели. Если модель изменится, то AngularJS повторно отобразит DOM.

Так, например

ctrl.updateSelected = function(currency){
    ctrl.selected = currency; 
    $scope.selectedCurrency = currency; // change on $scope
}

и в вашем HTML

<p>10{{selectedCurrency.symbol}}</p>

Таким образом, DOM будет изменен и отображен новый символ валюты.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню