AngularJS之基本指令(init、repeat)】的更多相关文章

<h3>ng-init初始化变量</h3> <div ng-init="name='aurora';age='18'"> <p ng-bind="name+','+age"></p> <p>{{name+','+age}}</p> <p ng-bind="name"></p> <p ng-bind="age">…
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码…
在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expression}}`或者`{{expression | filter}}`这种形式的表达式乱码,然后这些乱码又快速的消失了,然后页面就正常了.这个问题的原因是,在一些现代浏览器,比如Chrome,Firefox等中尤为严重.当然还跟环境的网络速度有关. 出现这个问题的根本原因是,JavaScript操…
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------------------------------------------------------------------------------------------ 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有Angu…
文章是转的,我做下补充.原文地址:https://segmentfault.com/a/1190000002773689 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看一下,当scope参数被设置为…
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明…
指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.js"></script> <div ng-controller="detail"> <input type="text" ng-model="test"> <label ui-a=&q…
angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义服务实现 对象工厂必须返回一个指令定义对象 //定义指令的类工厂 var directiveFactory = function(injectables){ //指令定义对象 var directiveDefinationObject = { ... }; return directiveDefin…
指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令. AngularJS原有的指令 ng-init   初始化指令 ng-if   条件指定 ng-repeat   循环指令 等等指令. 原有的指令会单独有一篇文章来说明 下面为大家介绍下创建新指令的方法 加入html代码 <div ng-app="myapp"> <hello-world></hello-w…
(如果有说的不对,欢迎指教,更欢迎大家一起交流.) 关于angularjs的ng-repeat指令,想必每个学习angularjs的初学者都很有映像.那我也总结一下我使用ng-repeat的时候经验,ng-repeat他只能循环出数组和对象,所以当在项目中,如果碰到ng-repeat循环不出数据的时候,不妨查看一下数据源是否为数组等 . 其次说一下循环内嵌,循环内嵌就是ng-repeat某个json数组某个数据时候,还需要循环其子数据 例如json格式如下: 我们需要循环出name和city里面…
前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angular.module("app",[]).directive("directiveName",function(){ return{ //通过设置项来定义 }; }) 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明…
偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下载体验一下. 言归正传,当前前端的开发中,MVVM框架非常流行,比较典型的如:AngularJS.VueJS等,这部分框架基本都有一个指令的概念,在工具中配置相关的提示,可以极大地方便的我们的开发,下面就来介绍一下如何在Hbuilder中进行配置. 依次点击:工具 -> 扩展代码块 -> 自定义h…
今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的angularjs 就是只有骨头的框架,虽然有很多第三方指令,如:angular Bootstrap,ng-table等,但是根据界面设计的需求,他们远远不能满足,怎么办??答案只有自己写了(也可以google,但是为了某个小功能,引入一个很大的文件,我是不提倡的.如果老板想让你时不时的改改,我估计你…
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义.  下面定义了一个简单的控件,点击后调转到博客园. Note: 1.命名方式:directive必须以小写字母开头,其中如果后面由大写字母,html调用的时候就要用 - 将单词分开. <html> <script src='angular.js'></script> <scri…
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定义指令(上)中,写了一个简单的<say-hello></say-hello>,能够跟美女打招呼.但是看看人家ng内置的指令,都是这么用的:ng-model=”m”,ng-repeat=”a in array”,不单单是作为属性,还可以赋值给它,与作用域中的一个变量绑定好,内容就可以动态…
一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度并非是我现在的功力能够理解的,只能是知其皮毛.我现在学习的途径是官方文档 + AngularJS在github上的中文粗译版(https://github.com/basestyle/angularjs-cn)+ 网上搜到的一些文章.鉴于本人资质平平以前也只用过jQuery,目前只能做到理解ng的A…
angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. 用法: $timeout(fn, [delay], [invokeApply]); fn: 回调函数(必填) delay: number类型.延迟的时间(非必填),如果不填,表示等线程空下来以…
欢迎大家讨论与指导 : )  前言 当AngularJS中的内置指令不能满足我们的需求,或者当我们需要创建一个能够用于多个AngularJS程序的自包含的功能单元时,我们应该创建自定义指令来满足需求. 一.jqLite jqLite是AngularJS中使用的一个"精简版JQuery".我们可以使用jqLite来返回一个jqLite对象,从而通过这个jqLite对象使用jqLite的操作函数.在指令内部的element参数其本身也是一个jqLite对象.这里有一个特别要注意的地方:当我…
ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定.例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/angular.js…
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中: <script src="http://cdn.static.runoob…
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.但先…
1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoqiongqiu.iteye.com/blog/1917971 1.指令(directive)的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签 ,如同博客中的自定义的<hello>标签 2.directive中几个属性的介绍: ①restrict:表明指令的声明方式,选项E(元素E…
项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;">Menu1</a> <ul class="sub-menu"> <li ><a href="jav…
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hide ng-repeat ng-init ng-if ng-bind ng-bind-template ng-cloak ng-model ng-click ng-change ng-submit ng-include 内置指令说明 a.ng-href 使用说明: 当使用当前作用域中的属性动态创建U…
转:http://damoqiongqiu.iteye.com/blog/1917971 1.一点小说明 指令的作用:实现语义化标签 我们常用的HTML标签是这样的: <div> <span>一点点内容</span> </div> 而使用AngularJS的directive(指令)机制,我们可以实现这样的东西: <tabpanel> <panel>子面板1</panel> <panel>子面板2</pa…
现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http://www.angularjs.cn/A09C ------------------------------------------------------------------------------------------------------------------------------…
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0; $("#test").on("click",function(event){ if(event.target.tagName.toLowerCase()=="input") return; count++; var html="<…
首先先介绍下AngularJS指令下的几种函数 Link函数和Scope 指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父scope.也就是说,如果指令存在于一个controller下,它就会使用这个controller的scope. 如何运用scope,我们要用到一个叫做 link 的函数.它由指令定义对象中的link属性配置.让我们来改变一下我们的 helloWorld 指令,当用户在一个输入框中输入一种颜色的名称…
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码中可以有四种表现形式: 1.作为一个新的HTML元素来使用. <h…
from:http://blog.csdn.net/u011127019/article/details/52564111 定义和用法 ng-change 指令用于告诉 AngularJS 在 HTML 元素值改变时需要执行的操作. ng-change 指令需要搭配 ng-model 指令使用. AngularJS ng-change 指令指令不会覆盖原生的 onchange 事件, 如果触发该事件,ng-change 表达式与原生的 onchange 事件都会执行. ng-change 事件在…