Question

我想知道最好的做法是否最小化我自己的自定义指令模板中使用的指令数量。

我们举一个例子。假设我正在构建一个布局货币的指令，让用户选择其中一个。它可能看起来像这样：

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。但我可以选择编写链接功能，并使用element.on('click', doSomething)等内容来听取点击事件。

我的问题是：在ng-click上使用链接功能是最佳做法吗？为什么？使用ng-click解决方案而不是链接功能是否会降低性能？

Answer 1

当你在AngularJS时，我认为最佳做法是使用angular指令。这样，AngularJS知道进行模型更改跟踪。如果模型发生变化，则AngularJS会重新渲染DOM。

所以，例如

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

并在您的HTML中

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

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

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

1 个答案: