Question

HTML

<script type="text/ng-template" id="ProfileTemplateHTML" >
    <div class="container profilepopup-cont" align="center">
        <div class="row">
            <div class="col-sm-3 zero-margin-padding" align="center">
                <img id="DisplayImage" ng-src={{model.picLarge}} class="img-circle">
            </div>
...
</script>

在这个html模板文件中，我必须调用一个指令。我的指令名称是'help'。但是，如果我添加调用指令它不起作用。如何在angularjs中调用html模板中的指令？

Answer 1

我不确定我完全理解这个问题。 here是一个jsfiddle，用于演示如何在ng-template中使用自定义指令。

或尝试这个..

angular.module('demo', [])
  .directive('help', function() {
    return {
      template: '<div>Help! {{info}}</div>',
      scope: {
        info: '@info'
      }
    };
  })
  .controller('MainCtrl', ['$log',
    function($log) {
      this.hello = 'This is MainCtrl';
      this.template = 'profile-template.html';

      //construct
      $log.debug('DemoCtrl has been loaded');
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="demo">
  <script type="text/ng-template" id="profile-template.html">
    <div>this is profile-template.html</div>
    <div help info="this is directive info."></div>
  </script>
  <div ng-controller="MainCtrl as main">
    <h2>just a demo</h2>
    <div>{{main.hello}}, include template from {{main.template}}</div>
    <hr>
    <div ng-include src="main.template"></div>
  </div>

</body>

Answer 2

您可以通过这些方式添加指令

作为属性

＆＃13;

<div help>
 ...
  
 </div>

＆＃13;

作为单独的标签

＆＃13;

<page>
  
  //your code
  
</page>

＆＃13;

如何从angularjs中的模板html调用指令

2 个答案: