ngRepeatの配列要素からの角度指令

Question

私はいくつかのHTMLカードを持つプロジェクトに取り組んでおり、カードのフォーマットと配置は同じですが、内容は異なります。

各カードの内容を角度指示文として実装してから、ngRepeatを使用して、各指示文をカード内に表示しながら、どのような順序でも構いません。

私のコントローラ内部：それはこのようなものになるだろう

$scope.cards = [ 
    'directice-one', 
    'directive-two', 
    //etc.. 
] 

私のディレクティブ：

.directive('directiveOne', function() { 
    return { 
     restrict: "C", 
     template: '<h1>One!!</h1>' 
    }; 
}) 

.directive('directiveTwo', function() { 
    return { 
     restrict: "C", 
     template: '<h1>Two!!</h1>' 
    }; 
}) 

//etc.. 

私のhtml：

<div class="card" ng-repeat="item in cards"> 
    <div class="{{item}}"></div> 
</div> 

しかし...ディレクティブがありませんレンダリングする。だから私はclass="directive-one"とdivを取得します。

これは私の一部の設計上の瑕疵、文法上のエラーのようなもの、または角の制限に過ぎません。よく分かりません。

私はまた、ディレクティブ<card>を作ると考えられ、それにtemplateUrl:を渡し、それは私が私の$scopeにアクセスし、各カードはそれ自身の指示だった場合、私は持っているでしょうjavsacript能力を失う原因となるました。

コード助けをアドバイスしてください。何かが非常に役に立ちます！

Answer 1

ディレクティブは、HTMLマークアップで使用する必要がある場合にのみ選択します。例えば、カードレイアウトが同じであり、ユーザの好みに基づいて異なる情報を取ると仮定する。テンプレートで

HTMLファイル

<my-card Name="First" Option="Myoptions"></Card> 
<my-card Name="Second" Option="GenOptions"></Card> 

指令

angular.module("testapp").directive("MyCard", function() { 
scope: { 
name: '@', 
Option: '@' 
Controller: "myCardController", 
templateURL: "~/myCard/myCardTemplate.html" 
} 
}); 

あなたはディレクティブを経由してHTMLページから渡された情報を実装することができます。

これが役に立ちます。

上記の方法は、フレームワークの種類のものを開発する場合に優先されることに注意してください。たとえば、Webフレームワークを開発し、ヘッダーには5つのパラメーターがあり、これらの5つのパラメーターはマークアップを介して渡す必要があります。最も重要なことは、フレームワーク/ヘッダーが独立していることです。

Answer 2

コントローラでは、ディレクティブモジュールが必要です。次に、それらをあなたが持っている配列になるスコープ変数に割り当てます。私はデスクトップになるときにコードで更新され、電話でちょっとしたものをやってみた。