AngularJS--directive

转载 2015年07月08日 16:47:47

1.angularJS中directive命名

在使用directive时,第一个参数既是在html文档中使用的标签名。但是有个问题需要注意,在js文件中使用驼峰命名时,在html文件中需要使用'-'进行分隔,如下所示:

JS文件,在module中定义directive为myDirective:

angular.module('app',[])
    .directive('myDirective', function() {
        console.log('hello');
        return {
            restrict: 'E',
            template: '<a href="http://www.baidu.com">Click me to go to Baidu</a>',
            replace:true
        };
    });
HTML文件,使用标签应为my-directive

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../js/angular.min.js"></script>
    <script src="chapter8_1.js"></script>
</head>
<body>
    <my-directive></my-directive>
</body>
</html>

如果在HTML中同样使用驼峰形式,则会产生未知标签的错误。

2.Directive的格式

下面都是用来声明前面创建指令的合法格式:

<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!--directive:my-directive-->

为了让AngularJS能够调用我们的指令,需要修改指令定义中的restrict设置。这个设置告诉AngularJS在编译HTML时用哪种声明格式来匹配指令定义。我们可以指定一个或多个格式。例如,之前创建的指令中可以指定以元素(E)、属性(A)、类(C)或注释(M)的格式来调用指令:
angular.module('app',[])
    .directive('myDirective', function() {
        console.log('hello');
        return {
            restrict: 'EAC',
            template: '<a href="http://www.baidu.com">Click me to go to Baidu</a>',
            replace:true
        };
    });

无论有多少种方式可以声明指令,我们坚持使用属性方式,因为它有比较好的跨浏览器兼容性:<div my-directive></div>

遵循这个约定的同时,也要注意每个浏览器的内置样式,以便决定指令模板在HTML中是嵌套在声明元素内,还是替换声明元素。







angularjs-router-directive

  • 2017年07月17日 14:24
  • 233KB
  • 下载

angularJs-浅谈directive里面的隔离作用域

什么是scope我们在使用angular的时候,当我们定义ng-app的时候,就产生了一个作用域,只不过是ng-app所产生的作用域是根作用域,它是所有$scope的最顶层;除了ng-app能够产生作...

《AngularJS》5个实例详解Directive(指令)机制

本文整理并扩展了《AngularJS》这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请期待口令:Angular   1.一点小说明   指令的作用:实现语义化标签   我们常...

AngularJs:Directive指令用法(完整版)

一、Directive的定义及其使用方法 AngularJs的指令定义大致如下 ? 1 2 3 4 5 angular.module("app",[]).direc...

AngularJS的directive(指令)的配置选项说明

AngularJS的directive(指令)的配置选项说明
  • lai_xu
  • lai_xu
  • 2015年11月03日 00:38
  • 547

《AngularJS》5个实例详解Directive(指令)机制

本文整理并扩展了《AngularJS》这本书第六章里面的内容,此书近期即将由电子工业出版社出版,敬请期待口令:Angular   1.一点小说明   指令的作用:实现语义化标签...

AngularJs:Directive指令用法

用.directive函数来添加自定义指令,基本语法如下:var app=angular.module('myApp',[]); //申明模块 app.directive("dire...

AngularJS:何时应该使用Directive、Controller、Service?

AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Dire...

AngularJS—指令directive之controller,link,compile

关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller。不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名。另外一个需知道的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS--directive
举报原因:
原因补充:

(最多只允许输入30个字)