ビジュアルディレクティブダイナミックテンプレートがバインディングで機能しない

Question

これは実際の問題の単純化されたバージョンですが、何が起こっているのか、どのように修正するのかを理解したいと思います。私はそれにバインドされているパラメータに異なるテンプレートを読み込まなければなりません。

var app = angular.module('my_app', []) 
 
    .controller('controller', Controller) 
 
    .directive('dirTwo', DirTwo); 
 

 
function Controller() { 
 
    var este = this; 
 
    this.list = ["number", "text", "text"]; 
 
    this.change = function() { 
 
    this.list = this.list.reverse(); 
 
    } 
 
} 
 

 
function DirTwo() { 
 
    return { 
 
    restrict: 'E', 
 
    //template: ' Name: {{name}}{{type}}', 
 
    template: my_template, 
 
    scope: { 
 
     type: "=" 
 
    }, 
 
    link: function($scope) { 
 
     $scope.name = "Pepito"; 
 
     console.log("scope type: " + $scope.type); 
 
    } 
 
    } 
 
} 
 
var my_template = function(elem, attrs, $scope) { 
 
    console.log("template type: " + attrs.type); 
 
    switch (attrs.type) { 
 
    case 'number': 
 
     return '<a href="#">{{type}}</a>'; 
 
     break; 
 
    default: 
 
     return ' ---- ' 
 
     break; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
<div class="app" ng-app="my_app" ng-controller="controller as App"> 
 
    <p>{{App.list}} 
 
    <button ng-click="App.change()">Reverse</button> 
 
    </p> 
 
    <dir-two ng-repeat="item in App.list track by $index" type="item"></dir-two> 
 
</div>

テンプレート関数のログは、ワードitem代わりにnumber又はtextを印刷します。テンプレートを正しくロードするにはどうすれば修正できますか？

Answer 1

typeがスコープの値を取るコンパイル段階の前にテンプレート解決が行われるため、残念ながらtemplateを使用する方法はありません。スコープ値に基づいてディレクティブのテンプレートを変更するには、その値を確認し、ディレクティブ要素が変更されたときにそのディレクティブ要素を再コンパイルする必要があります。ディレクティブを新しいテンプレートで完全に再コンパイルしますが、同じスコープを使用します。これを1回行うことができます（つまり、$watchを付けずに）。

次のスニペットは、このソリューションを実装しています。

var app = angular.module('my_app', []) 
 
    .controller('controller', Controller) 
 
    .directive('dirTwo', DirTwo); 
 

 
function Controller() { 
 
    var este = this; 
 
    this.list = ["number", "text", "text"]; 
 
    this.change = function() { 
 
    this.list = this.list.reverse(); 
 
    } 
 
} 
 

 
function DirTwo($compile) { 
 
    return { 
 
    restrict: 'E', 
 
    template: '', 
 
    scope: { 
 
     type: "=" 
 
    }, 
 
    link: function(scope, element) { 
 
     
 
     var tmplScope; 
 
     
 
     scope.name = "Pepito"; 
 
     scope.$watch('type', function(type) { 
 

 
     if (tmplScope) tmplScope.$destroy(); 
 

 
     tmplScope = scope.$new(); 
 

 
     element.html(getTemplate(type)); 
 
     $compile(element.contents())(tmplScope); 
 
     }); 
 
    } 
 
    } 
 
} 
 
var getTemplate = function(type) { 
 

 
    switch (type) { 
 
    case 'number': 
 
     return '<a href="#">{{type}}</a>'; 
 
     break; 
 
    default: 
 
     return ' ---- ' 
 
     break; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.1/angular.min.js"></script> 
 
<div class="app" ng-app="my_app" ng-controller="controller as App"> 
 
    <p>{{App.list}} 
 
    <button ng-click="App.change()">Reverse</button> 
 
    </p> 
 
    <dir-two ng-repeat="item in App.list track by $index" type="item"></dir-two> 
 
</div>

UPDATE注：は、私はそれがコンパイルされるたびに新しい子スコープを作成しても、それが再コンパイルしますと、この子スコープを破壊するために、実際のコンパイルシステムを変更しました以前のものを破棄せずに再コンパイルするときに新しいwatchersを追加しないようにしてください。コメントのこの問題について警告した@georgeawgに感謝します。