angularJs工作日记-自定义指令Directive01

新项目组使用完善的angularMVVM设计思路架构，很庆幸能够来到这个项目组，在这里的每一天都能够学习到新的知识，为了防止以后忘记，记录一下个人的理解

首先接触最多的是directive，directive目前用到了以下几个属性， restrict，scope，link，templateUrl

首先是restrict：这个无需多说，用来定义自定义指令的使用形式，包括A属性，E标签，C是class，M是备注，最常用的就是EA，尤其是E可以在标签中使用自定义属性传参给父controller，或者定义回调函数等

temolateUrl：可以自定义一个模板文件，并将其在项目中的位置写在此处，这样就可以把需要展现的html格式传给这个自定义 指令并在使用的位置插入。

scope：该属性可以创建一个隔离的作用域，在这个作用域中的$scope与其他指令及controller中的scope是互相独立的，同时你也可以通过@，=和&来绑定一个变量，这个变量会和指令外层的controller进行双向数据绑定，无论那边有变动都会实时更新

@：为单向绑定，会将值得变动告诉外面调用该值的对象，=是双向数据绑定，&是绑定一个函数，外层可以通过调用这个函数来传递参数或方法。

如：

link：简单理解为改指令自己的controller控制器，在其中可以编写控制这个指令页面元素的js代码。其中，可以为其传入$scope和el，前者是改指令的scope对象，后者为改指令元素本身，如上面图片中就是filter-infos标签，包括其中的class，attr等

时间： 2024-10-06 15:51:34

angularJs工作日记-自定义指令Directive01的相关文章

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容. 前面提到AngularJS的四大特性: 1 MVC 2 模块化 3 指令 4 双向数据绑定 下面将会介绍如下的内容: 1 如何自定义指令 2 自定义指令的使用 3 自定义指令的内嵌使用 如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然后在此模块基础上创建指令d

AngularJs 第一个自定义指令编写

公司在做一个OA系统, 包括移动端(从微信企业号进入OA系统),电脑端. 电脑端还是用的传统的easyui做界面,asp.net mvc作为服务端.这个技术已经很成熟了配合权限框架很快就能开发出来.但是手机端之前团队也没有什么经验,我之前做过一个jqureymobile的项目,但是这个框架实在是太卡了,直接pass掉.恰好之前有自学一点点angularjs 所以我就推荐手机端的项目使用angularjs来开发,一来团队可以学习一些新技术跟上潮流,二来单页程序很适合我们目前的这个小项目,三是我们以

20170831工作日记--自定义View学习

学习了LayoutInflater的原理分析.视图的绘制流程.视图的状态及重绘等知识,按类型来划分的话,自定义View的实现方式大概可以分为三种,自绘控件.组合控件.以及继承控件.那么下面我们就来依次学习一下,每种方式分别是如何自定义View的. (一)自绘控件 自绘控件的意思就是,这个View上所展现的内容全部都是我们自己绘制出来的.绘制的代码是写在onDraw()方法中的.参考相关博客 http://blog.csdn.net/guolin_blog/article/details/1735

angularjs前端分页自定义指令pagination

在table的后面:<div class="panel-footer"> <nav class="pull-right"> <pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination> </nav> </div>

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

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

走进AngularJs(五)自定义指令----（下）

自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定义指令(上)中,写了一个简单的<say-hello></say-hello>,能够跟美女打招呼.但是看看人家ng内置的指令,都是这么用的:ng-model="m",ng-repeat="a in array",不单单是作为属性,还可以赋值给它,与

【转】AngularJS——自定义指令

原文链接:http://www.html-js.com/article/1561 创建自定义指令 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令

Angularjs[25] - 自定义指令（1）（restrict, template, replace）

自定义指令: module.directive(name,directiveFactory) @see $compileProvider.directive() ??  不要使用 ng 为指令,若指令名为 xxx-yyy,在设置指令名时应为 xxxYyy 即驼峰命名法. restrict: 可以任意组合四种风格,如果忽略 restrict,默认为A. 字母 风格 示例 E 元素 <my-dir></my-dir> C 样式类 <span class="my-dir:

AngularJS笔记--自定义指令

在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定义了一个简单的控件,点击后调转到博客园. Note: 1.命名方式:directive必须以小写字母开头,其中如果后面由大写字母,html调用的时候就要用 - 将单词分开. <html> <script src='angular.js'></script> <scri