変数を指令に渡してDRY？

私には、scopeと宣言されたディレクティブが含まれているコード（鉱山ではない）があります。私の願いは、他の場所でディレクティブを使用し、テンプレート内で使用される追加の変数を渡すことです。変数を指令に渡してDRY？

私が渡したい変数はtheVarです。

私は仕事ができることが分かった唯一の解決策は悪夢になります

(function(angular) { 
 
    'use strict'; 
 

 
    angular.module('theFoo', []) 
 

 
    .controller('Controller', ['$scope', function($scope) { 
 
    $scope.theVar = true; 
 
    }]) 
 

 
    .directive('aDirective', function() { 
 
    return { 
 
     scope: { 
 
     'someVarThatWasHereBefore': '=', 
 
     'theVar': '=' 
 
     }, 
 
     template: '<p ng-show="theVar">You have successfully passed a boolean value!</p>' 
 
    }; 
 
    }); 
 

 
})(window.angular);

<body ng-app="theFoo"> 
 
    <div ng-controller="Controller"> 
 
    <a-directive data-the-var="theVar"></a-directive> 
 
    </div> 
 
</body>

scope内の私の変数4回の名前を繰り返すことなく、それを行うにはどのような方法がありますとHTML要素？

出典

2016-08-31 Michał Sałaban

あなたは、私はそのディレクティブは、より高いレベルの機能の種類と 'scope'として働き理解（ディレクティブのオブジェクトリテラルの定義を返す）関数を返す関数 –

そのコードは正常です。変数の名前を4回繰り返します。つまり、ディレクティブを定義する角度がどのように働いているのか、それらにデータを渡し、テンプレート内のデータを使用します。

変数を定義して渡すことはDRYの原則に反するものではありません。 DRYはロジックのブロックを書き換えないことです。

変数の命名を明確にする - ディレクティブに渡す変数は、ディレクティブのスコープ内でその名前と一致する必要はありません。

(function(angular) { 
 
    'use strict'; 
 

 
    angular.module('theFoo', []) 
 

 
    .controller('Controller', ['$scope', function($scope) { 
 
    $scope.myVar = true; 
 
    }]) 
 

 
    .directive('aDirective', function() { 
 
    return { 
 
     scope: { 
 
     'someVarThatWasHereBefore': '=', 
 
     'theVar': '=' 
 
     }, 
 
     template: '<p ng-show="theVar">You have successfully passed a boolean value!</p>' 
 
    }; 
 
    }); 
 

 
})(window.angular);

<body ng-app="theFoo"> 
 
    <div ng-controller="Controller"> 
 
    <a-directive data-the-var="myVar"></a-directive> 
 
    </div> 
 
</body>

出典

2016-08-31 18:04:18 plong0

を使用することができますマッピングはその関数の署名です。シグネチャがないと、外側のスコープの内容全体がディレクティブに渡されるという奇妙な例外があります。それは正しいのですか？ –

私は一種ですが、関数との比較は実際には正確ではないと考えています - ロジック関数を組み込んだUI要素です**スコープをコンテキストと考える**一部のディレクティブはプライベートコンテキストを持つ必要があります（*分離スコープ*）、他のディレクティブはそのコンテキストを継承する必要があります。 * "シグネチャがないと、外側のスコープの内容全体が渡されます" * - 厳密にはそうではありませんが、それは包含する要素の厳密なスコープオブジェクトを使用するだけです。 'scope：true'を使うと、各インスタンスは独自のスコープを取得し、それを含む要素のスコープからすべてを初期化します（* inherits *）。 – plong0

変数を指令に渡してDRY？

答えて

関連する問題