自定义Directive使用ngModel

我们知道ngModel是AngularJS中默认的一个Directive,用于数据的双向绑定.通常是这样使用的: <input type="text" ng-model="customer.name" /> 在控制器中大致这样: $scope.customer ={ name: ''} 在上一篇中,有关表格的Directive是这样使用的: <table-helper datasource="customers" clum…

理解AngularJS生命周期：利用ng-repeat动态解析自定义directive

ng-repeat是AngularJS中一个非常重要和有意思的directive,常见的用法之一是将某种自定义directive和ng-repeat一起使用,循环地来渲染开发者所需要的组件.比如现在有一个form-text指令,用于快速构建起带自定义数据验证的表单文本框,我们可以用类似下面的代码方便地建立起一个简单的表单: controller中: $scope.form = {}; $scope.form.inputs = [{ model: 'name', required: 'requir…

AngularJS自定义Directive

(编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Directives以及对应的代码实例.这篇我们再看看如何创建自己的Directive吧! 什么时候需要自定义Directive? 1. 使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 看一下如下2个代码片段: 示例1: <body>…

关于angular 自定义directive

关于angular 自定义directive的小结首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp",[]).directive("expander",function(){ return{ //directive的一些属性(键值对形式)如下: /* restrict:'EA', replace:true, transclude:true, scope:{...}, templ…

AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆分成多个独立的小方法,也未必要复用它们一样.职责独立等一票好处,会让后期维护更加轻松. 在重构的过程中,我遇到了这样一个问题,先上图: 图一: 这就是我要重构的界面,由于之前时间紧,将这三个Filter和两个button都写在了一个页面中.当时我已经预感到,如果将这里面的状态都写到一个scope上,…

AngularJS自定义Directive中link和controller的区别

在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <button id="addItem">Add Item</button><without-Controller datasource="customers" add="addCustomer"></without-…

AngularJS自定义Directive不一定返回对象

AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法: angular.module('modulename') .directive('myDirective', function(){ return { restrict: 'EA', //E表示element, A表示attribute,C表示class,M表示commnent,即注释 scope:{ title: '@' //@读属性值,=双向绑定,&用户函数 } template: '<div&g…

AngularJS自定义Directive初体验

通常我们这样定义个module并随之定义一个controller. var app = angular.module('myApp', []); app.controller('CustomersController', ['$scope', function($scope){ var counter = 0; $scope.customer = { name:'', street:'' }; $scope.customers = [ { name:'', street:'' }, ... ];…

AngularJs(Part 11)--自定义Directive

先对自定义Directive有一个大体的映像 myModule.directive('myDirective',function(injectables){ var directiveDefinitionObject={ restrict:string, priority:number, template:string, templateUrl:string, replace:bool, transclude:bool, scope:bool or object, controller:func…

angularJs中自定义directive的数据交互

首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离.后者我暂时没接触,但数据交互部分却是一样的.所以举几个前者的例子,以备以后忘记. directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope.例子如下: <body ng-app="myApp" ng-control…

AngularJS自定义Directive与controller的交互

有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度. 比如有如下的一个controller: app.controller('MyCtrl',function($scope){ $scope.load = function(){ console.log('loading more...') } }); 现在自定义一个Direcitve,需要调用MyCtrl这个controller中的load方法. app.direc…

Vue用递归实现一个消除输入框表情符的自定义directive

最近项目中有一个需求,所有的文本输入框需要过滤掉表情符号,但是觉得每次表单验证的时候去判断,有点麻烦.于是我想到了自定义一个指令,后续遇到需要删除表情符号的输入框,直接通过指令将表情符号删除就好了,方便快捷! 一.首先看看Vue自定义指令文档 https://cn.vuejs.org/v2/guide/custom-directive.html 二.在项目的directive中自定义一个指令:noEmoji 这里需要用到的是对传入的binding的参数进行dom操作,将组件中的vue实例传入,改…

angular之自定义 directive

1,指令的创建至少需要一个带有@Directive装饰器修饰的控制器类.@Directive装饰器指定了一个选择器名称,用于指出与此指令相关联的属性的名字. 2,创建一个highlight.directive.ts文件可以用命令 ng g directive highlight;内容如下这里是做一个给元素加色彩的一个指令. import { Directive, ElementRef, Renderer } from '@angular/core'; @Directive({ selecto…

自定义 directive pagination

学习angular过程中,对directive 不是很了解,很有必要自己写一个,以便知道它的各方面的处理方式. directive 中 scope 与 controller 交互,有三种定义策略 "=" ,"@" , "&" 另外一个就是 cope的双向绑定.是要消耗时间的,并不能立即在controller 中使用使用: <mypagination start="start" length="len…

angular自定义指令－directive

Directive究竟是个怎么样的一个东西呢?我个人的理解是这样的:将一段html.js封装在一起,形成一个可复用的独立个体,具体特定的功能.下面我们来详细解读一下Directive的一般性用法. var myDirective = angular.module('directives', []); myDirective.directive('directiveName', function($inject) { return { template: '<div></div>',…

angularJS中directive与controller之间的通信

当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的指令. 1.指令作用域中的"@" 作用:把当前属性作为字符串传递实现指令与html页面元素关联. <!DOCTYPE html> <html ng-app="demoapp"> <head lang="en"> &…

AngularJS Directive - 开场小介绍(转)

Directive其实就是让html变得更强大的一种方法.它可以根据需求对dom变形,或注入行为. 觉得它很神秘么,其实一点儿也不神秘,只要开始使用AngularJS了,就一定在使用着Directive,比如我们在html上写的那些ng-controller,ng-model,ng-show等等都是AngularJS提供的Directive啊~ 那到底内部是怎么实现的呢?或者如果觉得AngularJS内置提供的Directive不给力咋办?现在咱们就自己做一个试试看吧~ 先来个比较简单的需求,假…

Angular 下的 directive （part 1）

directive 指令 Directive components 指令部分使用指令自动引导一个AngularJS应用.ngApp指令指定应用程序的根元素,通常是放在页面的根元素如: <body> or <html>标签. AngularJS应用程序可以自动引导HTML文档.首先在文档中找到ngApp将被引导为应用程序的根元素. 在HTML文档中运行多个应用程序您必须手动引导他们使用angular.bootstrap来代替. AngularJS应用程序不能相互嵌套.…

directive 指令一

什么是Directive Directive将一段html,js封装在一起,形成一个可以复用的独立个体,具有特定的功能.angularjs中的指令通常是比较小的组件,它相当于是给我们提供了一些公共的自定义的DOM元素.class属性或attr属性.除此之外,我们可以在这个基础上来操作scope,绑定事件,更改样式等等.通过Directive我们可以封装很多公共指令,比如分页.自动补全等多个指令,封装好后,我们下次复用只要在html页面上添加该指令就可以实现复杂的功能. 总结一下使用Directi…

angulajs 详解 directive 中的 scope 概念

Directive 是 angularjs 中最重要的概念,我的理解就是自定义html tag, 这个自定的tag 浏览器不会解析,会有angularjs 来动态解析. 比如在html 中添加 <myPannel title="title" description="pannel description"></mypanel>, 这个myPannel tag 浏览器显然不认识,这个其实就是一个 directive. 这个directive 我…

AnagularJs之directive

前言: 昨日周六,再登梧桐山.六点半,起.未到顶,雨纷飞.冒雨行,终封顶,只为合照一张.五点半,下山行.聆听大自然的律动,双腿随其自然而颤抖!今早起,我的双腿犹如叛逆期的少年,或如领家的孩童,遂决定今天宅一天,为打发闲暇时光,写篇博文. 为什么要用directive? ng的directive从字面上理解就是ng框架的一个指令. 假如我们发现要写很多公共或是重用的dom.class.attr属性或是需要操作scope作用域,就要考虑代码最好不要copy.不要出现重复的代码段,好像是哪位大牛说的话…

ckeditor+angularjs directive

var cmsPlus = angular.module('cmsPlus', []); cmsPlus.directive('ckEditor', function() { return { require: '?ngModel', link: function(scope, elm, attr, ngModel) { var ck = CKEDITOR.replace(elm[0]); if (!ngModel) return; ck.on('instanceReady', function…

Scope Directive

---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/scope What are Scopes? Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hiera…

Vue directive 回调运用

Vue的官方自定义directive,基本调用简洁如下: Vue.directive('my-directive', { bind: function () {},// 指令与被绑定元素第一次绑定时触发,通常做一些事件监听的初始化 inserted: function () {},// 绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中). update: function () {},// 被绑定元素内容发生变化时触发,可接受参数,在这里也可以进行事件监听的初始化…

Angular之 Scope和 Directive

---------------------------Scope-------------------------------- https://docs.angularjs.org/guide/scope What are Scopes? Scope is an object(是一个数据模型) that refers to the application model. It is an execution context(scope是表达式的执行上下文) for expressions. Sc…

angular中的compile和link函数

angular中的compile和link函数前言这篇文章,我们将通过一个实例来了解 Angular 的 directives (指令)是如何处理的.Angular 是如何在 HTML 中找到这些 directive 的.以及如何编写自定义的指令. 这是原文提供的代码:http://www.angularjshub.com/examples/customdirectives/compilelinkfunctions/#top 更加友好的排版:http://blog.wangtuyao.com…

(翻译)Angular.js为什么如此火呢？

在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换. 我可以花整天的时间告诉你为什么你必须在新项目尝试angular.js,但是我觉得还是百说不如一练. 数据绑定和scopes(作用域) 首先…

AngularJS的Filter用法详解

上一篇讲了自定义Directive,本篇是要讲到AngularJS的Filter. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expression | filter:argument…

AngularJs 基础（60分钟入门）

AngularJS 是一个创建富客户端应用的JavaScript MVC框架.你仍然需要具有服务端后台,但大多数的用户交互逻辑将放到客户端上处理.它可以创建单页的应用程序,一个页面的应用仅仅需要HTML,CSS和JavaScript在客户端.它的目标是增强页面的模型-视图-控制(MVC)的功能,为简化开发和测试.单页Web应用(single page web application,SPA),就是只有一张Web页面的应用.浏览器一开始会加载必需的HTML.CSS和JavaScript,所有的操作…

angular(常识)

我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27471743 2009年google feedback project 1500行为了解决ajax开发的痛苦 1. 几个常用的概念a.客户端模板:模板和数据都会发送到浏览器中b.mvc: c.数据绑定:自动将Model和view间的数据同步.angular 实现数据绑定的方式,可以让我们把model…

【自定义Directive使用ngModel】的更多相关文章