1

テンプレートを別のテンプレートにコンパイルするだけのカスタム ディレクティブがあります。

.directive('staticInclude', function($http, $templateCache, $compile) {
        return function(scope, element, attrs) {
            var templatePath = attrs.staticInclude;
            //
            $http.get(templatePath, {
                cache: $templateCache
            }).success(function(response) {
                var contents = element.html(response).contents();
                $compile(contents)(scope);
            });
        };
    });

私はそれを次のように使用します：

<div static-include="components/campaign/details.html"></div>

コントローラーのエイリアスを (angular UI ルーターを使用して) 使用しているため、いずれかのテンプレートのすべてのモデルは次のようになります。

<p>Delivery Time: <span class="text-medium">{{CtrlAlias.campaign.newsletter.sentDate | date:CtrlAlias.currentUser.params.settings}}</span></p>

CtrlAlias が変更される複数のテンプレートでこのディレクティブを機能させるにはどうすればよいですか?

$compile(contents)(scope); を変更してみました。$compile(contents)(scope.newCtrlAlias) に;

何か案は？

4

2 に答える 2

3

$compile してからリンクすると、コンパイルされたコンテンツがリンクされる独自のスコープを自由に指定できます。つまり、テンプレート コンテンツに任意の ViewModel 名を参照させることができます。たとえば、次のようになりますvm。

<p>Delivery Time: <span>{{vm.campaign.newsletter.sentDate}}</span></p>

vmプロパティを持つスコープに対してリンクします。

var scope = { vm: {...} }

実際には、コンテンツがリンクされているときにそこにあるかもしれないし、ないかもしれないスコープ変数の存在を想定していないことを確認するために、コンパイルされたコンテンツに分離スコープを使用することさえ役立つかもしれません:

.directive('staticInclude', function($templateRequest, $compile) {
  return {
    link: function(scope, element, attrs){
       var alias = attrs.alias || 'vm';
       var templatePath = attrs.staticInclude;

       var newScope = scope.$new(true); // isolate scope
       newScope.vm = scope[alias];

       // $templateRequest is essentially $http with $templateCache
       $templateRequest(templatePath)
           .then(function(html){
              $compile(html)(newScope, function cloneAttachFn(clone){
                 element.empty();
                 element.append(clone);
              });
           });
    }
  };
});

次に、使用法は次のようになります。

<div ng-controller="MainCtrl as main">
    <div static-include="components/campaign/details.html" alias="main">
    </div>
</div>
于 2015-07-25T22:36:52.970 に答える
0

なぜこれを使用する必要があるのか​​ 理解できないので、答えるのは簡単ではありません。<div>ただし、考えられる解決策の 1 つは、目的のコントローラー情報を追加できる でテンプレートをラップすることです。少しグロスですが、うまくいくかもしれません。コントローラー名とそのエイリアスを渡す必要がありますが、それを$stateのデータ プロパティに追加して、そこからアクセスすることもできますが、これも少しハックなようです。

デモ

app.directive('staticInclude', function($http, $templateCache, $compile) {

  return {

    scope: {
      ctrlName    : '@',
      alias       : '@'
    },

    link: link

  };


  function link(scope, element, attrs) {

      var templatePath = attrs.staticInclude;

      $http
        .get(templatePath, {
            cache: $templateCache
        })
        .success(function(response) {

          var ctrlStr   = scope.ctrlName + ' as ' + scope.alias,
              template  = '<div ng-controller="' + ctrlStr + '" >' + response + '</div>',
              contents  = element.html(template).contents();

            $compile(contents)(scope);

        });

  };

});
于 2015-07-25T11:49:09.597 に答える