angularjs指令 | 易学教程

AngularJS快速入门指南04：指令

阅读更多关于 AngularJS快速入门指南04：指令

/*--> */ /*--> */ 　　AngularJS通过指令将HTML属性进行了扩展。 AngularJS指令　　AngularJS指令是带有 ng- 前缀的扩展HTML属性。　　 ng-app 指令用来初始化AngularJS application。　　 ng-init 指令用来初始化application数据。　　 ng-model 指令用来将HTML控件（如input，select，textarea等）的值绑定到application数据。 <div ng-app="" ng-init="firstName='John'"> <p>Name: <input type="text" ng-model="firstName"></p> <p>You wrote: {{ firstName }}</p> </div> 运行　　 ng-app 指令同时也告诉AngularJS，它所在的<div>元素是AngularJS application的根元素，即作用域。数据绑定　　在上面的示例中，{{ firstName }}是一个AngularJS数据绑定表达式。　　在AngularJS数据绑定中，AngularJS表达式使用AngularJS数据进行同步更新。　　 {{ firstName }} 通过 ng-model="firstName" 同步更新数据。

Angularjs directive

阅读更多关于 Angularjs directive

.directive('mydir',function(){ return{ multiElement: true/false, priority: number, //default: 0 terminal: true/false, scope: false/true/{ myattr: '=attr', myattr2: '@str', myattr3: '&fun' }, bindToController: true/false, controller: function($scope,$element,$attrs,$transclude){ $transclude([scope], cloneLinkingFn, futureParentElement) /*$transclude(function(clone, scope) { element.append(clone); transcludedContent = clone; transclusionScope = scope; });*/ }, //default: /'?dirName'/ require: 'dirName'/'?dirName'/'^dirName'/'^^dirName'/'?^dirName'/'?^^dirName', controllerAs: 'string', restrict:

19angular1中的directive

阅读更多关于 19angular1中的directive

注意：1、在分页组件中，从后台获取总项数，触发改造函数，获取改造后的总项数，分页组件重载。组件不重载的情况：没有触发改造函数；解决办法是：$scope.$watch('总项数', function (nl) {执行改造函数})。2、分页组件的展示逻辑：（1）以当前页为中心，根据当前页的大小，展示左侧；（2）以最大值与当前页的差值为中心，根据差值的大小，展示右侧。一、自定义标签1、在JS里，使用驼峰命名法来命名，如：myDirective；在html页面调用该指令时需要以 - 分割，如： my-directive。2、在自定义组件中，template，构成DOM，（1）compile，生成DOM、监听DOM、修改呈现内容，（2）controller：用来提供可在指令间复用的行为，（3）link，在compile后操作DOM，需要用scope.$apply(scope.doSomething())调用scope.doSomething()。 if (that.alertHtml && that.alertMethod) { that.alertScope = $rootScope.$new(); angular.extend(that.alertScope, that.alertMethod); angular.element(document.getElementById('

angularJS（4）

阅读更多关于 angularJS（4）

一：angulaJs的作用域scope Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。 scope 是一个 JavaScript 对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。 Scope 可应用在视图和控制器上。 AngularJS 应用组成如下 :$scope是一个模型 View(视图), 即 HTML。 Model(模型), 当前视图中可用的数据。 Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。在之前的内容中说到的都是只有一个作用域的，但是在大型的项目当中，可能会存在多个的作用域如下面的例子： <div ng-app="myapp"> <h1 style="color:#ff0000" ng-controller="mycc">{{myname}}</h1> <h1 ng-controller="ucc">{{myname}}</h1> </div> <script language="javascript"> var app=angular.module("myapp",[]); app.controller("mycc",function($scope){ $scope.myname="猪八戒"; }) app.controller("ucc"

AngularJS表达式

阅读更多关于 AngularJS表达式

特点：AngularJS使用表达式把数据绑定到HTML,这是与JavaScript不同的一点！这与ng-bind指令有异曲同工之处 1.表达式卸载双大括号内： {{expression}} 2.将表达式书写的位置“输出”数据 3.和JavaScript一样包含文字，运算符，变量数字： < div ng - app = "" ng - init = "a1=2;a2=5" > < p > a1与a2的和： { { a1 + a2 } } < / p > < p > a2减a1的值： { { a2 - a1 } } < / p > < p > a2与a1的乘值： { { a2 * a1 } } < / p > 相当于： < p > a2与a1的乘值： < span ng - bind = "a1 * a2" > < / span > < / p > < p > a2减a1的值： < span ng - bind = "a2 - a1" > < / span > < / p > < p > a1与a2的和： < span ng - bind = "a2 + a1" > < / span > < / p > < / div > 字符串： < div ng - app = "" ng - init = "name1='bob';name2='dom'" > < p > 姓名： { {

angularJS 自定义指令分页

阅读更多关于 angularJS 自定义指令分页

原理和使用说明 1、插件源码主要基于angular directive来实现。 2、调用时关键地方是后台请求处理函数，也就是从后台取数据。 3、插件有两个关键参数currentPage、itemsPerPage，当前页码和每页的记录数。 4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。在调用的页码中我使用了$watch来监控。我初次使用时是把调用函数放在了插件的onchange中，结果发现每次都会触发两次后台。这个地方需要注意。 5、我把请求后台封装成了Service层，然后在Controller里调用，也符合MVC思想。效果图调用代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 <div ng-app= "DemoApp" ng-controller= "DemoController" > <table class = "table table-striped" > <thead> <tr>

AngularJS笔记3-- ng-show ng-class

阅读更多关于 AngularJS笔记3-- ng-show ng-class

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> ng-show / ng-hide 通过绑定一个布尔型的变量，显示或隐藏HTML元素。当 note.assignee为 true ( 也可以是非空字符串·，非0数字，非空JS对象等)时，assignee所对应的span元素可见。 ng-class 用于选择性的从HTML中添加或者删除CSS class . ng-class指令可接收字符串或对象作为参数 1.参数为字符串：直接把它作为CSS class名称应用到UI中 2 .参数是对象，angularJS会检查该对象的每一个属性及它所对应的值，根据值是false 还是true来决定到底添加还是删除CSS class 本例：参数为对象，包含两个属性：当 note.done为true时，会添加名为 done的 css class 并删除 pending . 反之当note.done为false 时添加pending 删除done <!DOCTYPE html> <html ng-app="notesApp"> <head> <meta charset="UTF-8"> <title></title> <script src="js/angular.min.js"></script> <script src="js/jquery-3.1.1.min.js"><

angularJS（4）

阅读更多关于 angularJS（4）

angular指令中scope的绑定策略

阅读更多关于 angular指令中scope的绑定策略

angular指令中scope的绑定策略 scope的作用是让父与子的scope可以进行传递数据，它的绑定一般分为三种情况: @ ：把当前属性作为字符串传递，还可以绑定来自外层scope上的值，在属性中插入{{}}即可； =：与父scope中的属性进行双向绑定； &：传递一个来自父scope中的函数，稍后调用。 '@' 的使用 <person name="{{zhangsan}}"></person> <person name="{{lisi}}"></person> js部分： var app = angular.module('app',[]); app.controller('apCtrl',['$scope',function($scope){ $scope.zhangsan = '张三'; $scope.lisi = '李四'; $scope.greet = function(name,word){ console.log(name +'----'+word) }; }]) app.directive('person',function(){ return { replace: true, scope: { nameself:'@name' //此处的name是<person name="{{lisi}}"></person>的name,也就是{{lisi}} },

Angularjs之directive指令学习笔记（二）

阅读更多关于 Angularjs之directive指令学习笔记（二）

1.Directive的五个实例知道driective作用、其中字段restrict、template、 replace、transclude、link用法参考文章链接地址： http://damoqiongqiu.iteye.com/blog/1917971 1.指令（directive）的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 ,如同博客中的自定义的<hello>标签 2.directive中几个属性的介绍： ①restrict：表明指令的声明方式，选项E(元素Element)，A（属性Attribute），C（样式类Class），M（注释Comment） ②template/templateUrl:替换自定义元素的html的标签及内容 ③replace:true/false :决定自定义标签的显示及隐藏 ④transclude:true决定自定义标签内子标签的内容的显示处理,此时<hello>标签里的内容保持不变 ⑤link:一些事件需要绑定到某个元素上，那么你需要提供一个link函数 http://www.cnblogs.com/jimmychange/p/3498906.html compile：在directive中如果需要对DOM元素进行处理，基本都是在这个函数中进行。仔细看这个函数，compile并不能访问scope， link

订阅 angularjs指令