Dynamic templateUrl - AngularJS

Question

Angular 1.1.4のように、動的テンプレートURLを使用できます。 hereから

templateUrl - 指定されたURLからテンプレートが読み込まれます。テンプレートのロードは非同期であるため、コンパイル/リンクはテンプレートがロードされるまで中断されます。

templateUrlは、URLを表す文字列として、またはtElementとtAttrsの2つの引数（以下のコンパイル関数apiで説明）をとり、urlを表す文字列値を返す関数として指定できます。

私のディレクティブの属性に基づいてダイナミックテンプレートを生成するにはどうすればよいですか？ tAttrs.templateTypeは私がこれを管理しますどのように、単に私がスコープへのアクセスを持っていないことを考えると、文字列「templateType」

templateUrl: function (tElement, tAttrs) { 
    if (tAttrs.templateType == 'search') { 
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead.html' 
    } else { 
    return '/b/js/vendor/angular-ui/template/typeahead/typeahead2.html' 
    } 
} 

あるので、これは明らかに、動作しませんか？

Answer 1

次AngularJSで動的テンプレートを作成することも可能です：あなたのディレクティブの使用では ：

template : '<div ng-include="getTemplateUrl()"></div>' 

今、あなたのコントローラが使用するテンプレートかを決めることがあります。

$scope.getTemplateUrl = function() { 
    return '/template/angular/search'; 
}; 

あなたはACCを持っているのであなたのスコープのパラメータには、あなたもすることができます：

$scope.getTemplateUrl = function() { 
    return '/template/angular/search/' + $scope.query; 
}; 

サーバーがあなたのための動的テンプレートを作成することができます。ファイルAPI（< IE10）をサポートしていないブラウザのためのファイルアップロードフォールバックを作成するときに

Answer 2

だから、問題は、私が先行入力ディレクティブをハッキング方法をしていました...私はtypeaheadPopupディレクティブで評価されるように、先行入力にスコープ変数を設定しました。代わりに、私はtemplate32 attrを文字列&として直接渡しました。例えば。

var popUpEl = angular.element(
    "<typeahead-popup " + 
    "matches='matches' " + 
    "active='activeIdx' " + 
    "select='select(activeIdx)' " + 
    "template-type='" + attrs.templateType + "'" + 
    "query='query' " + 
    "position='position'>" + 
    "</typeahead-popup>"); 

代わりの"template-type='templateType'"

Answer 3

は、同様の問題に遭遇しました。主な違いは、スイッチをオンにする属性値の恩恵なしに、どのテンプレートを表示するかをインテリジェントに決めるためのページが必要だったことです。

私の指示にconstantプロバイダを使用しました。定数は、基本的に、ディレクティブのどこにでも挿入できるデフォルトのパラメータを設定します。私は単純に定数をブラウザのサポートを決定する関数にして、プルするテンプレートを決定する必要があるときにその値を参照します。 1）は一切参照するための属性と2）あなたは、コントローラへのアクセスを持っていないとき、それは前のリンクフェーズで利用できるありませんので、これはいいです。 1.2.17角度（そしておそらくそれ以前）のよう

(function() { 
    var myDir = angular.module('myDir', []); 
    myDir.constant('myDirConfig', { 
     hasFileSupport: fileApiIsSupported() 
    }); 

    myDir.directive('myDir', ['myDirConfig', function (myDirConfig) { 
     return { 
      templateUrl: function() { 
       if (myDirConfig.hasFileSupport) { 
        return 'pathToTemplate/html5.html'; 
       } else { 
        return 'pathToTemplate/fallback.html'; 
       } 
      } 
     }; 
    }]; 

    function fileApiIsSupported() { return (...); } 
})(); 

Answer 4

templateUrl: function (elem, attrs) { 
return attrs["template"] == "table" ? 
"tableTemplate.html" : "itemTemplate.html"; 
}