All geek questions in one place

How to call a directive from an html template 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 need to call the directive. My directory name is "help". But if I add to call the directive, it does not work. How to call a directive inside an html template in angularjs?

+4
source share
2 answers

I'm not sure I fully understand the question. here is jsfiddle to demonstrate how to use a custom directive inside an 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>
Run codeHide result
0
source

You can add a directive in these ways.

  • As attribute

<div help>
 ...
  
 </div>
Run codeHide result
  1. As a separate tag

<page>
  
  //your code
  
</page>
Run codeHide result
-1
source

Source: https://habr.com/ru/post/1627737/

More articles:


All Articles