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

  • 相关阅读:
    iOS中网络请求判断是否设置代理
    swif开发笔记12-Animations
    swift开发笔记11
    swift开发笔记06
    Idea热部署jrebel失败
    Oracle连接知识
    Idea安装及其简介
    博客园cnblog发布word
    en笔记音标
    测试案例小问题
  • 原文地址:https://www.cnblogs.com/ZengYunChun/p/6868040.html
Copyright © 2011-2022 走看看