码迷,mamicode.com
首页 > Web开发 > 详细

Angularjs[25] - 自定义指令(1)(restrict, template, replace)

时间:2017-01-31 19:20:04      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:属性   指令   tor   false   vendor   logs   html   --   module   

自定义指令:

  1. module.directive(name,directiveFactory)
  2. @see $compileProvider.directive()

??  不要使用 ng 为指令,若指令名为 xxx-yyy,在设置指令名时应为 xxxYyy 即驼峰命名法。

  • restrict: 可以任意组合四种风格,如果忽略 restrict,默认为A。
字母 风格 示例
E 元素 <my-dir></my-dir>
C 样式类 <span class="my-dir:exp;"></span>
A 属性 <span my-dir="exp"></span>
M 注释 <!-- directive: my-dir:exp-->

 

  • template: 模板内容,这个内容根据 replace 参数设置替换节点或仅替换节点内容。
  • replace: 若此配置为 true 则替换指令所在元素,若为 false 或不指定,则把当前指令追加到所在元素内。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div ng-app="myApp">
        <custom-tags>222</custom-tags>
        <div class="custom-tags"></div>
        <div custom-tags></div>
        <!-- directive: custom-tags -->
    </div>

<script type="text/javascript" src="../../vendor/angular/angularjs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
</body>
</html>
var myApp = angular.module(‘myApp‘,[],[‘$compileProvider‘,function ($compileProvider) {
    $compileProvider.directive(‘customTags‘,function () {
        return{
            restrict: ‘ECAM‘,
            template:‘<div>custom-tags-html</div>‘,
            replace: true
        }
    });
}])

技术分享

 

Angularjs[25] - 自定义指令(1)(restrict, template, replace)

标签:属性   指令   tor   false   vendor   logs   html   --   module   

原文地址:http://www.cnblogs.com/bky-1083/p/6358997.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!