いくつかの不明な理由により、AngularJS partialにhtmlをバインドできませんか？

Question

部分的なhtmlファイルを使用してループし、項目をページに表示するng-repeatがありますが、何らかの理由で部分的な変数が表示されませんが、変数{{rule.name}}は表示されません部分的な表示は良い？

ルールは配列です（例： rules [0] .name = '私の最初のルール'; rules [0] .desc = '私の最初のdesc'; rules [1] .name = '私の第2のルール'; rules [1] .desc = '私の2番目のdesc';

<div ng-controller="RulesController" ng-if="hasManageRules" class="roles canvas-column"> 
<div ng-repeat="(ruleIndex, rule) in rules"> 
    {{rule.name}} // this shows the variable fine 
    <div ng-include src="'templates/partial/rule.html'"></div> 
</div> 

//私の部分/ rule.htmlファイル：

<div ng-controller="RuleController" class="card-body no-hover form-group" ng-click="unfoldrule(ruleIndex)" ng-class="{'unfolded': rule.unfolded}"> 
<ng-form name="ruleForm"> 
    <div class="card-header"> 
     <div class="card-title" ng-if="!rule.unfolded" ng-bind-html="rule.name"></div> 

rule.name変数はNG-バインドに表示されない理由を誰もがお勧めできます何かの理由で-html？

Answer 1

ng-controller="RuleController" rule.htmlファイル内に与える必要はありません。

Answer 2

テンプレートのコントローラのスコープでrules変数を使用できないとします。そのため、テンプレート内にロードされていません。ルール変数を設定するサービスがある場合は、それがコントローラ定義の依存関係であることを確認してください。次に、サービスから$ scope.rules = promise/variableを設定します。それはトリックを行う必要があります。また、@ Nikhilが示唆しているように、コントローラをhtmlテンプレートに含める必要はありません。 これが役立つことを願っています。

Answer 3

別の "ng-controller =" RuleController ""があなたのインクルードされたhtmlにあります - あなたはそれ自身のデータで新しいスコープを作成しています。

代わりにng-model="$parent.ruleを使用してデータにアクセスし、子テンプレートにng-controllerを使用しないでください。