1

では、テンプレートを div にロードするカスタム ディレクティブを作成しているとしましょう。私のカスタム ディレクティブは と呼ばれloadClickedTplます。をクリックするloadClickedTplと、属性が読み込まれ、テンプレートが に読み込まれ#targetます。

これまでのところ、私のhtmlは次のようになります。

 <html np-app="mymodule">
      <head>...</head>
      <body>

           <a loadClickedTpl tplSrc="myTpl" > Click Me to load template </a>

           <div id="target" ng-include src="clickedTpl"></div>

           <script type="text/ng-template" id="myTpl">
                <h1>Loaded</h1>
           </script>

      </body>
 </html>

問題はclickedTpl、テンプレートを指すように var を設定することです。そのようにhtmlで実行された場合、<div id="target" ng-include src="'myTpl'"></div>問題なく動作しますが、プログラムで実行することは困難であることが証明されています。これが私がこれまでに試したことです：

angular.module('loadATpl').directive 'loadClickedTpl', ->
     (scope, element, attrs) ->
           element.bind 'click', -> 
                # does not work
                scope.clickedTpl = attrs.tplSrc

                # also does not work
                angular.injector(['ng']).invoke ($rootScope) ->
                       $rootScope.clickedTpl = attrs.tplSrc

                # obviously does not work
                clickedTpl = atts.tplSrc

angular.module('mymodule', ['loadATpl'])

クリックバインディングは機能しますが、それで終わりです。

4

1 に答える 1