指令で 'scope'と 'var'の間の関数を宣言するのはいつですか？

Question

In this plunk私は、2回インスタンス化された指令を持っています。いずれの場合も、ディレクティブの結果（テンプレートによって定義されたもの）は正しく表示されます。

質問はgetValue2()をscope.getValue2またはvar getValue2と定義する必要があるかどうかです。それぞれの命令を使用するタイミングは？

HTML

instance 1 = <div dirx varx="1"></div> 
    <br/> 
    instance 2 = <div dirx varx="2"></div> 

Javascriptを

var app = angular.module('app', []); 

app.controller('myCtl', function($scope) { 

}); 

app.directive('dirx', function() { 

    var directive = {}; 

    directive.restrict = 'EA'; 

    directive.scope = {  
      varx: '=' 
    }; 

    directive.template = '{{getValue()}}'; 

    directive.link = function (scope, element, attrs) { 

     scope.getValue = function(){ 
      return getValue2(); 
     }; 

     var getValue2 = function() { 
     return scope.varx * 3; 
     } 

    }; 

    return directive; 

}); 

Answer 1

それはあなたのアプリケーションの状態の一部である場合、あなたは$scopeオブジェクトのプロパティとして何かを宣言する必要があるだけです。

角1.xは "dirty check" $scopeとなり、DOMを変更します。 $scopeオブジェクトにあるものはすべて監視することができるので、変数とトリガ機能を監視できます。このため、角度検索&のフィルタリングはほとんどJSコードなしで行うことができます。言われているように、 '$スコープ'を必要としないものから解放することは、一般的には良い習慣です。

これまでのところ、getValue()については、レンダリングまたはHTMLの指示文で呼び出されていますか？答えが "いいえ"の場合、$scopeオブジェクトのプロパティとして宣言する必要はありません。

ディレクティブテンプレートでgetValue()を使用しているため、UIでレンダリングされているため、角度の$scopeにする必要があります。

また、単に行うことができます。 directive.template = '{{ varx * 3 }}';

ドキュメント：https://docs.angularjs.org/guide/scope

Answer 2

まず最初に、コードが不要なネストされた呼び出しが含まれていることです。それができる：

var getValue2 = function() { 
    return scope.varx * 3; 
    } 

    scope.getValue = getValue2; 

2つ目は、それをすることができ、getValue2が再利用されていない、必要ないということである。getValue以来

scope.getValue = function() { 
    return scope.varx * 3; 
    } 

は、テンプレートで使用され、それがにさらされるべきスコープはscope.getValueです。それがテンプレートで使われなくても、テスト容易性のために関数をスコープに公開するのは良い方法です。したがって、getValue2が本当に必要な場合は、それを定義してscope.getValue2と呼び出すと、オーバーヘッドは小さくなりますが、テスト容易性が向上します。

スコープオブジェクトのプロパティへのリンク関数と直接アクセスの使用は古くなっており、最新のアプローチはcontrollerAsとthisです。