自定义angularjs指令:我应该最小化模板中的指令数量吗?

自定义angularjs指令:我应该最小化模板中的指令数量吗?,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我想知道,将我自己的自定义指令模板中使用的指令数量降至最低是否被认为是最佳实践 让我们举个例子。假设我正在构建一个指令来布局货币,并让用户选择其中一种。可能是这样的: function SelectCurrencyDirective(){ return { restrict: 'E', scope: { currencies: '<', onChange: '&' }, template: [ '<div

我想知道,将我自己的自定义指令模板中使用的指令数量降至最低是否被认为是最佳实践

让我们举个例子。假设我正在构建一个指令来布局货币,并让用户选择其中一种。可能是这样的:

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
  }
}
函数SelectCurrencyDirective(){
返回{
限制:'E',
范围:{

货币:“在AngularJS中,我认为使用AngularJS指令是最佳实践。 通过这种方式,AngularJS知道如何进行模型更改跟踪。如果模型更改,AngularJS将重新呈现DOM

比如说

ctrl.updateSelected = function(currency){
    ctrl.selected = currency; 
    $scope.selectedCurrency = currency; // change on $scope
}
在你的HTML中

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

因此,DOM将被更改并显示新的货币符号