【AngularJS自定义Directive初体验】的更多相关文章

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:'' }, ... ];…

vue.js2.0 自定义组件初体验

理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 创建单文件组件 <template> </template> <script> export default { }; </script> <style lang="st…

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

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

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…

angularJs初体验，实现双向数据绑定！使用体会：比较爽

使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model='ngName'> <h1>{{ngName}}</h1> </body> 完成对数据的初始化: //初始化原理:ng-app 初始完之后,就会往在ng-init里面赋值一个初始值:world , 这个值会自动绑定到下面 : <body ng-app ng-in…

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

前端angularJS利用directive实现移动端自定义软键盘的方法

最近公司项目的需求上要求我们iPad项目上一些需要输入数字的地方用我们自定义的软键盘而不是移动端设备自带的键盘,刚接到需求有点懵,因为之前没有做过,后来理了一下思路发现这东西也就那样.先看一下实现之后的效果: 实现的效果就是当点击页面中需要弹出软键盘的时候软键盘弹出,浮在页面的中间,和模态框一样的效果,可以在软键盘中输入任何数字,附带的功能有小数点.退格.清空.确定等功能.当在键盘上点击数字的时候页面中的表单中实时的添加对应的数字,上图中可以看到. 产品经理那边给的原因是iPad屏幕本来就小,如…