How to call directive from template html in angularjs

问题

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>

In this html template file i have to call a directive.My directive name is 'help'.But if i add to call the directive it is not working. how to call a directive inside html template in angularjs?

回答1:

You can add the directive in these ways

As an attribute

<div help>
 ...
  
 </div>

As a separate tag

<page>
  
  //your code
  
</page>

回答2:

I'm not sure i fully understand the question. here is a jsfiddle to demonstrate how to use custom directive inside ng-template.

or try this..

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>

来源：https://stackoverflow.com/questions/35264442/how-to-call-directive-from-template-html-in-angularjs

标签

angularjs

angularjs-directive