2

私がやろうとしているのは、ディレクティブのAngular jsテンプレートのロードを、本当に必要になるまで延期することです。まったく必要ないかもしれません。ディレクティブのテンプレートを必要な場合にのみロードできる方法はありますか？サービスはこれを行う方法でしょうか？私のアプリケーションはすでに多くのディレクティブテンプレートをロードしているので、必要な場合を除いて、あまり多くのものをロードしないようにしたいと思います。手元にある正確な問題は、ログインフォームのテンプレートの読み込みです。ユーザーがボタンをクリックしてもログインしていない場合は、ログインフォームを（jQueryを使用して）slideOpenしたいと思います。

4

2 に答える 2

6

ほとんどの場合、静的ディレクティブテンプレートを動的にロードする価値はありません。それらは非常に小さいので、それを行うのは意味がありません。しかし、それは可能です。ただし、ほとんどの場合、この戦略は動的テンプレートに使用されます。

$httpテンプレートをフェッチし$compileてAngularJSにワイヤリングする必要があります。

app.directive('testDirective', function($http,$compile) {
  return {
    scope: { show: '&' },
    link: function( scope, element, attrs ) {
      var tpl,
          url = 'testDirective.tpl.html';

      scope.$watch( 'show()', function (show) {
        if ( show ) {
          showTheDirective();
        }
      });

      function showTheDirective () {
        if ( !tpl ) {
          $http.get( url ).then( function ( response ) {
            tpl = $compile( response.data )( scope );
            element.append(tpl);
          });
        }
      }
    }
  };
});

これは、それが機能することを示すプランカーです。

于 2013-02-16T18:37:13.557 に答える
1

なぜあなたng-ifはディレクティブを試してみませんか。

<your-directive ng-if='userLoggedIn'></your-directive>

とあなたのコントローラーで

app.controller('yourCtrl', function($scope, service){
    $scope.dataHasLoaded = false;

    service.yourUserLoginFuntion(params).then(function (data) {
         //your login api
         $scope.userLoggedIn = true
    });
});

ここで、スコープ変数userLoggedIn は、ディレクティブをロードする必要がある場合にのみtrueになります。

于 2016-11-24T06:59:42.823 に答える