angularJS 自定义指令命名注意事项

AngularJS学习笔记(四) 自定义指令

指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易见,方便复用. 本文会以一个检查用户名是否重复的指令为例,说明自定义指令怎么写.这个指令是我琢磨着写的,只是一个例子,知识点不全是一定的,不过能用,嗯..不过如果代码哪里写的有问题请指出. 先看代码 <button my-check>注册</button> 当然,这是属性风格的指令,还

AngularJs自定义指令详解（1） - restrict

下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布2.0,所以现在也没必要追求最新版本.而且,2.0变动实在太大,所以当前学习AngularJs不需要过度深入. AngularJs自定义指令时,要求返回一个指令定义对象(Directive Definition Object),该对象可以声明若干属性和方法.下面例子的restrict.templat

AngularJS: 自定义指令与控制器数据交互

<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title>  <sc

浅析AngularJS自定义指令之嵌入(transclude)

AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transclude. transclude: true: 表示指令元素内容(子元素)会被嵌入. element: 表示整个元素会被嵌入,包括哪些尚未被编译的属性指令.ng-repeat指令就是这种模式 ng-transclude:

angularjs自定义指令Directive

今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin". 在网页上放一个文本框和一个铵钮: <form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate> <in

angularJs 自定义指令传值---父级与子级之间的通信

angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bolVal"></my-html>,index的controller定义为myAppCtrl: js: angular.module('app.myApp') .controller('myAppCtrl',['$scope','myService',myAppCtrl]) .se

angularJs自定义指令.directive==类似自定义标签

创建自定义的指令除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: restrict 值可以是以下几种: E 作为元素名使用 A 作为属性使用 C 作为类名使用 M 作为注释使用 restrict 默认值为 EA, 即可以通过元素名和

angularJS——自定义指令

主要介绍指令定义的选项配置 //angular指令的定义,myDirective ,使用驼峰命名法 angular.module('myApp', []) .directive('myDirective', function ($timeout, UserDefinedService) { // 指令操作代码放在这里 }); //angular自定义指令的使用,使用 "-" 来代替驼峰命名法 <div my-directive></div> 注意:为了避免与未

利用angularJs自定义指令（directive）实现在页面某一部分内滑块随着滚动条上下滑动

最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(directive). 1.下面是我html部分代码,detail-scroll是我自定义的标签 ............... <div id="time" style="position: relative;"> <div ng-style=&quo

angularjs - 自定义指令(directive)

自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirective, 但在使用它时需要以 - 分割, demo-directive: <!DOCTYPE html> <html> <head> <meta name='viewport' content='width=device-width, initial-scale=1.

angular自定义指令命名的那个坑

Directive 先从定义一个简单的指令开始. 定义一个指令本质上是在HTML中通过元素.属性.类或注释来添加功能.AngularJS的内置指令都是以ng开头,如果想自定义指令,建议自定义一个前缀代表自己的命名空间.这里我们先使用my作为前缀: var myApp = angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, template

AngularJS自定义指令directive：scope属性（转载）

原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为标签(E).属性(A).属性值(C).还是注释(M). 指令的定义过程就不详述了,可以参考:https://docs.angularjs.org/guide/di

angularJs自定义指令（directive）实现滑块滑动

最近老大让我一个效果实现在页面某一部分内滑块随着滚动条上下滑动,说明一下我们项目使用技术angularJs.大家都知道,使用jquery很好实现. 那么angular如何实现呢,我用的是自定义指令(directive). 1.下面是我html部分代码,detail-scroll是我自定义的标签 ............... <div id="time" style="position: relative;"> <div ng-style=&quo

AngularJs自定义指令详解（6） - controller、require

在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要封装一些行为,给其他指令使用.下面是一个简单的例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="

AngularJS自定义指令(Directives)在IE8下的一个坑

在项目中,由于要兼容到IE8,我使用1.2.8版本的angularJS.这个版本是支持自定义指令的.我打算使用自定义指令将顶部的header从其他页面分离.也就是实现在需要header的页面只用在<body>后面加上<header></header>这个HTML标签就可以了,这样还能实现页面的语义化,而且也能在IE8中实现HTML5标签.以后很多部分都可以这一写,如搜索则可以变成<serach></serach>这样.但是在写好了后,才发现只有I

angularjs自定义指令

my-directive为指令名称,thisdata为绑定的数据 <span ng-repeat="act in move.casts" style="position:relative"> <my-directive thisdata="act"> </my-directive> <img src="" alt="" class="pic" &

AngularJs自定义指令详解（2） - template

一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAttrs. 前者用的较为普遍,而且也好理解.后者暂不理会. 下面是一个例子,在模板中使用rootScope里定义的变量: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8

angularJS自定义指令间的“沟通”

由此例子我们可以看出,angularJS使用指令时link的执行顺序<html> <head> <meta charset="utf-8"/> <title></title> </head> <body ng-app="components"> <div> <name xm> <h1>小明</h1> </name> <

angularJS自定义指令模板替换

<html> <head> <meta charset="utf-8"/> <title></title> </head> <body ng-app="components"> <myelement> <h1>哈哈</h1> </myelement> </body> <script src="angular.

angularjs自定义指令实现分页插件

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能.现在单独做了个简易的小demo,主要是为了分享自己写的分页功能.注:本实例调用的是真实接口数据. 首先.小demo的目录结构如下: 一.代码部分下面直接把每一个文件的代码贴出来,重点是ListCtrl.js和pageDirective.js: 1.index.html <!DOCTYPE html> <html lang="en" ng-app=&

AngularJs自定义指令详解（5） - link

在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如果指令使用了require选项,那么链接函数会有第四个参数,代表控制器或者所依赖的指令的控制器. // require 'SomeController',link: function(scope, element, attrs, SomeController) { // 在这里操作DOM,可以访问r

angularJS 自定义指令命名注意事项

热门专题