AngularJS创建新指令

指令(Directives)是所有AngularJS应用最重要的部分。尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令。

AngularJS原有的指令

ng-init   初始化指令

ng-if   条件指定

ng-repeat   循环指令

下面为大家介绍下创建新指令的方法

加入html代码

<div ng-app="myapp">
<hello-world></hello-world>
<div hello-world></div>
<div data-hello-world></div>
<div x-hello-world></div>
</div>

加入js代码,在渲染ng-app之前。如果不是动态加载angularjs则,把js代码写在html代码前。如果是动态加载angularjs则加在angular.bootstrap(document.body,["myapp"])前面。

angular.module(‘myapp‘, []).directive("helloWorld", function () {
        return {
            restrict: "AE",
            replace: true,
            template: "<div>HelloWorld</div>"
        };
    });

在上面的代码中,app.directive()方法在模块中注册了一个新的指令。这个方法的第一个参数是这个指令的名字。第二个参数是一个返回指令定义对象的函数。如果你的指令依赖于其他的对象或者服务,比如 $rootScope, $http, 或者$compile,他们可以在这个时间被注入。这个指令在HTML中以一个元素使用,如下:

<hello-world></hello-world>或<div hello-world></div>

也可以在元素前加上data-或x-,这两个为html5标准

<div x-hello-world></div>或<div data-hello-world></div>

这四种写法都能正常渲染.

而angularjs在匹配指令的时候,会把字符串转换成驼峰(camelCase)表现形式,然后再与注册过的指令进行匹配。

这是为什么,我们在HTML中以 hello-world 的方式使用 helloWorld 指令。

我们在指令定义过程中使用了三个属性来配置指令。

restrict – 这个属性用来指定指令在HTML中如何使用(还记得之前说的,指令的四种表示方式吗)。在上面的例子中,我们使用了 ‘AE’。所以这个指令可以被当作新的HTML元素或者属性来使用。如果要允许指令被当作class来使用,我们将 restrict 设置成 ‘AEC’,即如果用刚刚的

angular.module(‘myapp‘, []).directive("helloWorld", function () {
        return {
            restrict: "AEC",
            replace: true,
            template: "<div>HelloWorld</div>"
        };
    });

则<div class="hello-world"></div>也能正常渲染.

replace – 这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们的例子中,我们用 <hello-world></hello-world>的方式使用我们的指令,并且将 replace 设置成 true。所以,在指令被编译之后,生成的模板内容替换掉了 <hello-world></hello-world>。最终的输出是"<div>HelloWorld</div>",如果你将 replace 设置成 false,也就是默认值,那么生成的模板会被插入到定义指令的元素中。

template – 这个属性规定了指令被Angular编译和链接(link)后生成的HTML标记。这个属性值不一定要是简单的字符串。template 可以非常复杂,而且经常包含其他的指令,以及表达式({{ }})等。更多的情况下你可能会见到 templateUrl, 而不是 template。所以,理想情况下,你应该将模板放到一个特定的HTML文件中,然后将 templateUrl 属性指向它。

时间: 2024-11-05 12:31:24

AngularJS创建新指令的相关文章

带你走近AngularJS - 创建自定义指令

为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义指令的功能,并且AngularJS 是目前唯一提供Web应用可复用能力的框架. 目前有很多JavaScript 产品提供插件给Web开发人员.例如, Bootstrap 就是当前比较流行的提供样式和JavaScript插件的前端开发工具包.但是开发人员在使用Booostrap中的插件时, 必须切换到JavaScript 模式来写 jQuery

AngularJS 学习笔记 -- 指令(Directive)

AngularJS 指令学习笔记 AngularJS怎样处理指令其实是依赖于指令定义时返回的对象属性的,所以要想深入理解如何定义一个指令,首相需要理解指令定义时各个参数的含义. 完整的AngularJS指令参数 angular.module('app', []) .directive('demoDirective', function (){ // 依据官方规范,指令的定义时应该严格遵循驼峰式命名规则,使用时采用'-'连接单词 return { restrict : String in ['E'

AngularJS 内置指令(二)

下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔 离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app 和ng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域. ng-app 为AngularJS应用创建$rootScope,ng-controller则会以$rootScope或另外一个 ng-controller 的作用域为原型创建新的子作用域. 1. 子作用域: <!doctype html> <html

[转]你知道用AngularJs怎么定义指令吗?--很详细

前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方. Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令

【angularJS】Directive指令

AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 AngularJS 应用程序的 根元素. 2.ng-init 指令初始化应用程序数据. 通常情况下,不使用 ng-init.您将使用一个控制器或模块来代替它. 3.ng-model 指令把元素值(比如输入域的值)绑定到应用程序[一般是在控制器中定义的变量]. 4.ng-repeat 指令会重复一个 H

AngularJS中的指令

欢迎大家讨论与指导 : ) 明天天会继续更新本文O(∩_∩)O  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求.  一.创建自定义指令   一 . 1 命名规则  我们要在创建指令时使用峰驼式命名,例如指令是 <div unordered-list></div>  在声明指令时我们需要这样子写 app.directive("unorderedList

使用AngularJS创建应用的5个框架(转)

原文地址:http://www.php100.com/html/dujia/2015/0206/8580.html 本文由PHP100中文网编译,转载请看文末的转载要求,谢谢合作! 如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持 AngularJS.这些框架都有事先安装的Web组件,使用它们可以帮助你快速进行项目开发.这里列举5个这样的框架,帮助你使用AngularJS构 建Web应用.更多的框架资源,可以参考

Linux中创建新用户并赋给指定文件权限

工作中用到了,写篇日志总结一下. 创建新的用户: 第一种方式: 创建用户: adduser name 创建密码: passwd name(回车后出现修改密码的提示) 该方式创建的用户目录默认在home下. 第二种方式: useradd -d /usr/disp -m passwd 该方法可以在创建用户时制定该用户的根路径和密码. 通过这种方式创建的用户可以使用ssh登录,但只有只读权限可以浏览下载部分文件无法写和修改. 将该用户加入用户组: useradd -g idsp1 -n idsp 添加

使用AngularJS创建应用的5个框架

[导读] 如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都可以很好地支持AngularJS.这些框架都有事先安装的Web组件,使用它们可以帮助你快速进行项目开发.这里列举5个这样的框架,帮助你使用AngularJS构建Web应用.        本文由PHP100中文网编译,转载请看文末的转载要求,谢谢合作! 如果你计划使用AngularJS创建你的Web应用,那现在就开始吧.你不需要有任何的恐惧和担心,因为现在有很多的框架都