カスタムangularjs指示文：テンプレート内の指示文の数を最小限に抑える必要がありますか？

Question

自分のカスタムディレクティブのテンプレートで使用されるディレクティブの数を最小限に抑えることがベストプラクティスと考えられるかどうかは疑問です。

例を考えてみましょう。私は、通貨をレイアウトするための指示文を作成し、ユーザーにそれらの1つを選択させるとします。

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にいるときは、角度指示を使用することをお勧めします。 このように、AngularJSはモデルチェンジトラッキングを行うことを知っています。モデルが変更された場合、AngularJSはDOMを再レンダリングします。

ので、例えば

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

とあなたのHTML内

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

だから、DOMが変更され、新しい通貨記号が表示されます。