角度范围混乱

Fre*_*all 1 angularjs angularjs-directive

所以我要说我正在编写一个自定义指令,将模板加载到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>
Run Code Online (Sandbox Code Playgroud)

问题是将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'])
Run Code Online (Sandbox Code Playgroud)

点击绑定确实有效,但结果是这样.

Tos*_*osh 10

以下是工作样本:http://plnkr.co/edit/8BNYr9J8g6tRLMo8VdPi?p = preview

您需要将attrs用作角度指令的"load-clicked-tpl"(带连字符的表达式).