如何从angularjs中的模板html调用指令 [英] How to call directive from template html in angularjs

查看：21 发布时间：2021/11/9 23:02:04 angularjs angularjs-directive

本文介绍了如何从angularjs中的模板html调用指令的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

HTML

在这个 html 模板文件中，我必须调用一个指令.我的指令名称是帮助".但是如果我添加来调用该指令，它就不起作用.如何在 angularjs 中调用 html 模板中的指令?

解决方案

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

或者试试这个..

angular.module('demo', []).directive('帮助', function() {返回 {模板:'<div>帮助！{{info}}</div>',范围: {信息:'@信息'}};}).controller('MainCtrl', ['$log',功能($日志){this.hello = '这是 MainCtrl';this.template = 'profile-template.html';//构造$log.debug('DemoCtrl 已加载');}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><body ng-app="演示"><script type="text/ng-template" id="profile-template.html"><div>这是 profile-template.html</div><div help info="这是指令信息."></div><div ng-controller="MainCtrl as main"><h2>只是一个演示</h2><div>{{main.hello}}，包含来自{{main.template}}的模板</div><小时><div ng-include src="main.template"></div>

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?

解决方案

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>

这篇关于如何从angularjs中的模板html调用指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

如何从angularjs中的模板html调用指令 [英] How to call directive from template html in angularjs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

如何从angularjs中的模板html调用指令 [英] How to call directive from template html in angularjs

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭