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>

问题是将clickedTplvar 设置为指向模板。如果它像这样在 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

10

这是工作示例：http ://plnkr.co/edit/8BNYr9J8g6tRLMo8VdPi?p=preview

您需要将 attrs 用作角度指令的“load-clicked-tpl”（连字符表达式）。

于 2013-04-16T04:29:06.430 回答