angularjs笔记
  • Introduction
  • 依赖注入
  • 作用域
  • 数据绑定
    • 控制器->模板->控制器->模板
  • 多个控制器
  • $scope对象
    • $apply方法、$digest方法
    • $watch方法
    • 示例：购物车
  • 模块和控制器
  • $provide对象的provider、factory、service方法
    • 多个控制器内共享数据
  • 过滤器（Filters）
    • number、currency、date
    • limitTo、lowercase、uppercase
    • filter、orderBy、json
    • 示例：产品列表
    • 自定义过滤器
  • 控制器（controller）
    • 显式和隐式依赖注入
  • 指令
    • Angular 内置指令
    • Angular 自定义指令
      • restrict、template、replace属性
      • templateUrl属性
      • transclude、priority、terminal属性
      • compile && link属性
      • controller && controllAs属性
      • require属性
      • scope属性
  • Module里其他方法
    • constant、value、run方法
  • Form表单
    • 示例：注册页
  • XHR和服务器端的通信
    • $http
  • JavaScript基础
    • .isFunction是否为函数
  • 资料链接
  • 功能组件
    • Tooltip
    • CSV
  • 其他
    • $watchCollection
    • $controller 继承
    • 两个对象合并
    • 页面关闭
    • AngularJs 时间格式化处理
    • 数据的本地存储
    • 页面的URL
Powered by GitBook
On this page
  • restrict
  • template
  • replace

Was this helpful?

  1. 指令
  2. Angular 自定义指令

restrict、template、replace属性

restrict

  • restrict:指令在模版中的使⽤方式

  • 可以4种风格任意组合，如果忽略restrict，默认为A

  • 如果打算支持IE8，请使用基于属性和样式类的指令

字母

风格

示例

E

元素

<my-dir></my-dir>

C

样式类

<span class="my-dir: exp;"></span>

A

属性

<span my-dir="exp"></span>

M

注释

<!-- directive: my-dir exp -->

template

  • template:模板内容，这个内容会根据 replace 参数的设置

    替换节点或只替换节点内容。

replace

  • replace:如果此配置为true则替换指令所在的元素，如果为false或者不指定，则把当前指令追加到所在的元素内部

  • 对于restrict为元素(E)在最终效果中是多余的，所有replace通常设置为true

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

</head>
<body>
<div ng-app="myApp">

    <custom-tags>1212</custom-tags>

    <div class="custom-tags">

    </div>

    <div custom-tags>

    </div>

    <!-- directive:custom-tags -->
</div>


<script src="//cdn.bootcss.com/angular.js/1.4.8/angular.js"></script>
<script type="text/javascript" src="app/index.js"></script>


</body>
</html>

app/index.js

var myApp = angular.module('myApp', [], ['$compileProvider',function ($compileProvider) {

    $compileProvider.directive('customTags',function(){
        return {
            restrict:'ECAM',
            template:'<div>custom-tags-html</div>',
            replace:true
        }
    });

}])
PreviousAngular 自定义指令NexttemplateUrl属性

Last updated 5 years ago

Was this helpful?