angularjs指令

详细谈谈AngularJS的子级作用域问题

前言 AngularJS自带指令目前有ng-include、ng-view、ng-switch、ng-repeat。这样的原因是因为,这些指令虽然是AngularJS内部定义的,但是也是和directive实现的方法都是一样的,其内部使用的是scope:true的方式,子作用域继承了父级的作用,并且构建了一个独立的子作用域,所有双向绑定实现不了,只能单独实现子级作用域继承父级的属性。 Angula... »

AngularJS教程之MVC体系结构详解

模型- 视图 - 控制器模式是由以下三部分组成:模型/Model - 一个负责维护数据模式的最低水平。控制器/Controller - 软件代码控制Model和View之间的相互作用。MVC是受欢迎的,因为它隔离了应用逻辑从用户界面层和支持的关注点分离。MVC抽象可以用图形表示如下。AngularJS是一个MVC框架。在接下来的章节中,让我们看到了AngularJS如何使用MVC方法。 »

AngularJS入门教程之AngularJS表达式

表达式用于应用程序数据绑定到HTML。表达式都写在双括号就像{{表达式}}。表达式中的行为跟ng-bind指令方式相同。 AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里。 AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串、数字、运算符和变量 数字运算{{1 + 5}} 字符串连接{{ ‘ab... »

angularjs学习笔记之简单介绍

一.angularjs简介 AngularJS 是一个为动态WEB应用设计的结构框架。}这是angularjs的一种表达式的写法,也就是中间的text是一个变量它与上面的模型名称相对应,能够实时监听input值的变化,即时更新视图展示 哈哈,angularjs还是挺简单的吧,希望这个小笔记能够引起大家对angularjs的兴趣,后面我还会继续更新angularjs的学习笔记。 »

总结AngularJS开发者最常犯的十个错误

前言 AngularJS易于开发、较多的特征及较好的效果导致了较多的应用,伴随而来的是一些陷阱。本文列举了AngularJS的一些共同的易于出问题的地方,下面来一起看看吧。 一、MVC目录结构 AngularJS,直白地说,就是一个MVC框架。它的模型并没有像backbone.js框架那样定义的如此明确,但它的体系结构却恰如其分。当你工作于一个MVC框架时,普遍的做法是根据文件类型对其进行归类: ... »

AngularJS基础 ng-click 指令示例代码

AngularJS ng-click 指令 AngularJS 实例 按钮每次点击时,计数变量 count 自动加 1: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/an... »

AngularJS中的指令实践开发指南(二)

在AngularJS中的指令实践指南(一)中给大家介绍了,如何隔离一个指令的scope。第二部分将承接上一篇继续介绍。首先,我们会看到在使用隔离scope的情况下,如何从指令内部访问到父scope的属性。接着,我们会基于对 controller 函数和 transclusions 讨论如何为指令选择正确的scope。这篇文章的最后会以通过一个完整的记事本应用来实践指令的使用。 隔离scope和父s... »

ANGULARJS中使用JQUERY分页控件

ANGULARJS中使用JQUERY分页控件

首先在web项目中引用jquery1.10、Angularjs库文件以及jq-pagination控件。在本例中最大的问题是在使用Angularjs获取后台数据后如何将新的分页情况通知给jquery分页控件,然后刷新分页控件的页面数据。本例是在Angularjs和jquery代码中各进行一次回调来实现的。其实也可以在Angularjs指令中使用watch来监视分页控件数据的变化达到刷新页面的目的,... »

基于angularjs实现图片放大镜效果

前言一开始打算用原生的angularjs写,但是发现用原生angularjs,无论如何都不能获取里面图片的宽度和高度,因为angularjs内置的jquery方法里没有winth() 、height()方法。最好我还是引入了jquery,在同一scope上绑定了宽度高度。如果指令scope没有特殊声明,那么就是父scope。指令生成的模板没有特殊意义,除非在特定的scope下编译,默认情况下,指令... »

AngularJS基础 ng-class-odd 指令示例

AngularJS ng-class-odd 指令AngularJS 实例为表格的奇数行设置 :.striped } }运行结果: Alfreds Futterkiste Germany Berglunds snabbk Sweden Centro comercial Moctezuma Me... »

Angularjs 滚动加载更多数据

下面的例子只是为了简单记录怎么使用angularjs来实现滚动加载数据,具体的还是需要具体看待: Javascript部分的controller app.controller('AnalysizerCtrl', ['$scope', '$timeout', '$window', function ($scope, $timeout, $window) { $scope.showData = fal... »

用AngularJS的指令实现tabs切换效果

先来看看效果图首先先来说一下指令嵌套,指令嵌套顾名思义就是两个以上的指令嵌套在一起,比如下面这样: 下面这个tabs功能的指令,刚好用到了这个,可以让代码更加简洁。这里还有另外一个要说明的,为了让指令更加 »

AngularJS 基础ng-class-even指令用法

AngularJS ng-class-even 指令AngularJS 实例为表格的偶数行设置 :.striped } } 运行结果: Alfreds Futterkiste Germany Berglunds snabbk Sweden Centro comercial Moctezuma ... »

在React框架中实现一些AngularJS中ng指令的例子

首先设定一段Angularjs代码的ng-class: 比较容易理解的Angularjs ng-class设置样式代码,那我们使用React怎么去实现它呢?首先在state设置一个变量比如: isShowLoginMenu,在不同场景改变它的值,然后在绑定在class样式上面 or 使用Angularjs我们可以这样做:登录了 你好, 未登录 那我们使用React要怎么去实现这样的场景呢? »

AngularJS使用ng-repeat指令实现下拉框

AngularJs 的 ng-repeat 让我们非常方便的遍历数组生成 Dom 元素,但是使用不当也会有性能问题。下面给大家分享在项目中使用ng-repeat指令实现下拉框。 »

AngularJS入门教程之ng-class 指令用法

AngularJS ng-class 指令 AngularJS 实例 修改 <div> 元素的类: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular... »

实例剖析AngularJS框架中数据的双向绑定运用

数据绑定 通过把一个文本输入框绑定到person.name属性上,就能把我们的应用变得更有趣一点。这一步建立起了文本输入框跟页面的双向绑定。 在这个语境里“双向”意味着如果view改变了属性值,model就会“看到”这个改变,而如果model改变了属性值,view也同样会“看到”这个改变。Angular.js 为你自动搭建好了这个机制。如果你好奇这具体是怎么实现的,请看我们之后推出的一篇文章,其中... »

AngularJS使用ng-options指令实现下拉框

ng-option指令使用很简单,只需要绑定两个属性:一个是ng-model用于获取选定的值;另一个是ng-options用于确定下拉列表的元素数组。在此也非常感谢大家对软件开发网网站的支持! »

AngularJS ng-bind 指令简单实现

AngularJS ng-bind 指令AngularJS 实例绑定 内的 innerHTML 到变量 myText:运行结果:Hello World!定义和用法ng-bind 指令告诉 AngularJS 使用给定的变量或表达式的值来替换 HTML 元素的内容。语法或作为 CSS 类:所有的 HTML 元素都支持该指令。参数值 值 描述 ... »

基于AngularJS+HTML+Groovy实现登录功能

AngularJS是开发基于浏览器的响应式RWD应用程序的一个前端MVC框架,由谷歌最初开发的 开源项目,干净的架构吸引了大量粉丝,适合建立CRUD类型的业务应用程序,并不适合开发游戏等应用, 使用声明性编程的用户界面和命令式编程的逻辑, 支持现代桌面和移动浏览器 Internet Explorer版本8.0及以上。 AngularJS是一款客户端MVC的javascript框架,而客户端MVC代... »

AngularJS入门教程之路由与多视图详解

在这一步,你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。 请重置工作目录: git checkout -f step-7 注意到现在当你转到app/index.html时,你会被重定向到app/index.html#/phones并且相同的手机列表在浏览器中显示了出来。当你点击一个手机链接时,一个手机详细信息列表也被显示了出来。 步骤6和步骤7之间最重要的不同在下面列出... »

学习Angularjs分页指令

在项目中许多页面都用到了分页,然后每个页面都有许多重复的分页代码,于是自己写了一份简易的分页指令,简化页面的代码,且容易维护,写在博客中当做备份,方便以后查阅。 以下是定义指令及其应用的步骤: 1.指令定义 定义一个js文件,page-directive.js,用来写分页的指令代码,这个文件中包含了分页的模板,以下是js文件中的所有代码: 'use strict'; (function () { ... »

angularjs自定义ng-model标签的属性

有的时候我们需要为非input类型的元素添加ng-model来实现双向的数据绑定,从而减少冗余代码,那么可以尝试一下的方式例如:我页面中使用了contenteditable这个属性来实现用户可直接编译的div元素html: .text 输出新数据但是直接绑定ng-model是肯定得不到数据的,这时就需要为其增加自定义的属性,如下所示。 »

Angular.js中$apply()和$digest()的深入理解

$apply()和$digest()介绍AngularJS提供了一个非常酷的特性叫做双向数据绑定,这个特性大大简化了我们的代码编写方式。在上面的例子中,AngularJS并不直接调用$digest(),而是调用$scope.$apply() ,后者会调用$rootScope.$digest() 。实际上,AngularJS对此有着非常明确的要求,就是它只负责对发生于AngularJS上下文环境中的... »

AngularJS入门教程之AngularJS 模板

是时候给这些网页来点动态特性了——用AngularJS!我们这里为后面要加入的控制器添加了一个测试。 一个应用的代码架构有很多种。对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点。考虑到这一点,我们用AngularJS来为我们的应用添加一些模型、视图和控制器。 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部... »

Page 1 of 11123»