zoukankan      html  css  js  c++  java
  • AngularJs 中的transclude的理解

    Transclude是一个配置, 为了告诉AngularJs去获取当前指令模版内部的所有内容(实际使用ng-transclude), 更多关于怎么创建一个包含其他元素的指令: documentation of directives

    下面自定义一个指令用ng-transclude在指令模版中去指定你想插入的内容:

    angular.module('app', [])
      .directive('hero', function () {
        return {
          restrict: 'E',
          transclude: true,
          scope: { name:'@' },
          template: '<div>' +
                      '<div>{{name}}</div><br>' +
                      '<div ng-transclude></div>' +
                    '</div>'
        };
      });

    代码使用如下:

    <hero name="superman">Stuff inside the custom directive</hero>

    页面显示如下:

    Superman

    Stuff inside the custom directive

    完整的例子: 

    Index.html

    <body ng-app="myApp">
      <div class="AAA">
       <hero name="superman">Stuff inside the custom directive</hero>
    </div>
    </body>

    jscript.js

    angular.module('myApp', []).directive('hero', function () {
        return {
          restrict: 'E',
          transclude: true,
          scope: { name:'@' },
          template: '<div>' +
                      '<div>{{name}}</div><br>' +
                      '<div ng-transclude></div>' +
                    '</div>'
        };
      });

    页面: 

    enter image description here

    实现: 

    enter image description here

  • 相关阅读:
    vlc-ts
    es 模板
    zookeeper 启动脚本
    received shard failed for shard id
    gitlab runner 配置
    kafka 配置文件注释
    logstash 统计告警
    BigBao 的python开发到DevOps 之路
    logstash 自动重新加载配置
    rsyslog 传输日志
  • 原文地址:https://www.cnblogs.com/ZengYunChun/p/6868040.html
Copyright © 2011-2022 走看看