首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angularjs基础(三)

ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。       ...如何使用Scope       当你在AngularJS创建控制器时,你可以将$scope对象当做一个参数传递:           实例: 控制器中的属性对应了视图上的属性:             ...用rootscope定义的值,可以在各个controller中使用。     ...myCtrl 函数是一个JavaScript 函数。           AngularJS 使用$scope对象来调用控制器。           ...在AngularJS 使用$scope是一个应用像(属于应用变量和函数)           控制器的$scope(相当于作用域,控制范围)用来保存AngularJS Mode(模型)的对象。

3.1K50
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【Hybrid开发高级系列】AngularJS(一)——基础专题

    模板 app/index.html         我们现在添加了一个标签,并且使用AngularJS的$filter函数来处理ngRepeat指令的输入。...当页面加载的时候,AngularJS会根据输入框的属性值名字,将 其与数据模型中相同名字的变量绑定在一起,以确保两者的同步性。         ...使用filter过滤器:filter函数使用query的值来创建一个只包 匹配query记录的新数组。         ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。...2.1.9 关于JS压缩         由于AngularJS是通过控制器构造函数的参数名字来推断依赖服务名称的。...angule js中ng-view中使用了ng-include,如何实现ng-include的这个页面刷新,外部的ng-view不刷新 http://www.oschina.net/question/2356458

    55080

    AngularJs之Scope作用域

    我们再看一个例子,分析结果如何。 示例四:作用域继承实例-不再访问父作用域的数据对象。 <!...单向绑定(@ 或者 @attr)   这是 AngularJS 独立作用域与外界父作用域进行数据通信中最简单的一种,绑定的对象只能是父作用域中的字符串值,并且为单向只读引用,无法对父作用域中的字符串值进行修改...引用绑定(&或者&attr)   通过这种形式的绑定,孤立作用域将有能力访问到父作用域中的函数对象,从而能够执行父作用域中的函数来获取某些结果。...这种方式的绑定虽然无法修改父作用域的 attr 所设定的函数对象,但是却可以通过执行函数来改变父作用域中某些属性的值,来达到一些预期的效果。示例代码如下: 示例八:引用绑定示例 函数中对 func 对象的使用方法,$scope.isolates 获得的仅仅是函数对象,而不是调用这个对象,因此我们需要在调用完$scope.isolates 之后再调用这个函数

    1.6K30

    Angularjs1.X进阶笔记(1)—两种不同的双向数据绑定

    1.1数据从html流向controller 也就是从视图层流向模型层,原生html中需要使用表单元素(例如input标签)来收集用户输入信息,Angularjs中通过在表单元素上使用ng-model标签...我们需要获取到这个DOM元素,然后改变它的innerHTML属性,如果是表单元素就修改value。其实Angularjs也是这样做的,只不过使用了自己的封装的方法——$apply()。...而当我们再点击4次数字标签(一共点了5次)后,从控制台可以看出,scope.pagination的值已经成为10,而页面上使用ng-bind指令获取到的结果却依旧是5。...其实这里的问题仍然和Angularjs的运行机制有关,解决方案如下: 解决方案1 使用自定义指令的templateUrl属性替换当前指令的模板,使用ng-click指令来绑定一个点击响应函数,在响应函数中改变...我们可以回顾一下上面在使用双向数据绑定发生异常时的场景: 使用了原生的定时器(Angular中你应该使用$interval,$timeout服务) 用类原生方法(bind)为元素添加事件监听器,并在回调函数中修改了变量的值

    3.5K20

    达观数据对AngularJS技术的思考与实践

    AngularJs最迷人的一点便是双向数据绑定,AngularJS的工作原理是:HTML模板将会被浏览器解析到DOM中, DOM结构成为AngularJS编译器的输入。...Angular路由由ngRoute模块提供,需要引用angular-route.min.js。下面给出一个例子:文档结构: ? Index.html 部分: ?...AngularJs允许自定义filter:在你的模块中注册一个新的过滤器(可注入的)工厂函数。这个工厂函数必须放回一个新的过滤器函数,这个过滤函数的第一个参数接受的是输入。...Angular依赖注入的方式: 1)最简单的处理依赖的方法,就是假设函数的参数名就是依赖的名字,给出一个注入器可以通过检查声明来获取函数名,从而知道需要的依赖的函数。 ?...坦白的来讲,用了这种方法就不能使用JavaScript minifiers/obfuscators(一些用来缩短的JS的类库)了,因为它们会改变变量名。

    5.4K150

    AngularJS系列之常用指令

    ng-app 指令初始化一个 AngularJS 应用程序。 ng-init 指令初始化应用程序数据。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。.../1.4.6/angular.min.js"> 在输入框中尝试输入...除了上面说到的一些系统指令外,AngularJS中还可以自己定义指令,下面就给大家介绍一下AngularJS是如何实现自定义指令的: 创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令...你可以使用 .directive 函数来添加自定义的指令。 要调用自定义指令,HTML 元素上需要添加自定义指令名。... restrict 值可以是以下几种:E 作为元素名使用、A 作为属性使用、C 作为类名使用、M 作为注释使用。

    2.1K60

    AngularJS浅谈-博客

    /libs/angular.js/1.4.6/angular.min.js"> AngularJS 扩展了 HTML AngularJS 通过 ng-directives 扩展了 HTML...ng-app 指令定义一个 AngularJS 应用程序。 ng-model 指令把元素值(比如输入域的值)绑定到应用程序。 ng-bind 指令把应用程序数据绑定到 HTML 视图。...2、浏览器载入angular.js脚本。 3、AngularJS等到DOMContentLoaded事件触发。 4、AngularJS寻找ng-app指令,这个指令指示了应用的边界。...myCtrl 函数是一个 JavaScript 函数。 AngularJS 使用$scope 对象来调用控制器。 在 AngularJS 中, $scope 是一个应用象(属于应用变量和函数)。...,由模型,视图,过滤器,服务等等组成 我们都知道JavaScript很容易就写出全局函数,所以无论是用jQuery还是纯JavaScript,我们都会使用模块化的策略避免写出来的函数污染全局。

    2.4K30

    第217天:深入理解Angular双向数据绑定的原理

    在用户操作页面(比如在Input中输入值)的时候,数据能及时发生变化,并且根据数据的变化,页面的另一处也做出对应的修改。...在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。...5.双大括号{{变量}} 用双重大括号来获取变量的值。当在控制器中添加 $scope对象时,视图 (HTML)可以获取了这些属性。...通过以上实例,我们很容易就得到了用户输入的动态值,这是原生及其他框架难以实现的功能,当然,AngularJS除了数据的双向绑定以外,还有其他很多优秀的功能,希望读者通过这个简单的例子能敲开AngularJS...DOCTYPE html> 2 3 4 5 6 js/angular.min.js

    3.7K20

    再谈angularJS数据绑定机制及背后原理—angularJS常见问题总结

    脏检查如何被触发? angular 会在可能触发 UI 变更的时候进行脏检查:这句话并不准确。...所以说不要怀疑用户在输入表单时 angular 会不会监听页面左边导航栏的变化。 如何优化脏检查与运行效率 脏检查慢吗? 说实话脏检查效率是不高,但是也谈不上有多慢。简单的数字或字符串比较能有多慢呢?...ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决? 会提示 Duplicates in a repeater are not allowed....应用骨架 AngularJs $compile编译服务与指令 玩转Angular1(14)--使用$compile编译指令 Angular中$compile源码分析 angularjs使用$compile...编译模板后如何获取编译后的模板内容并将其转成字符串

    7.9K40

    angularjs学习第一天笔记

    第一天,简单了解了其中中一些基本概念  1、angularjs的解释     angularjs是Google旗下的一个前端js框架,其与html、css、js配合使用,从而使得web开发更加的简单快捷..., []); myApp.controller("myContro", function ($scope) { //// 清空输入函数 $scope.clear...AngularJS允许我们使用angular.module()方法来声明模块,这个方法能够接受两个参数, 第一个是模块的名称,第二个是依赖列表,也就是可以被注入到模块中的对象列表。...控制器是可以嵌套的,作用域也是嵌套的     定义使用方式如下:     var app = angular.module('模块名称', []);     app.controller('控制器名称'...)、插值字符串表达式,关键词( $interpolate)     a.解析达式,关键词( $parse),其结果是一个函数,也就是执行一个逻辑运算表达式     特征:解析异常不会抛出异常     代码实例

    2.2K10

    前端框架AngularJS入门

    AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。...3.3 初始化指令 我们如果希望有些变量具有初始值,可以使用ng-init指令来对变量初始化 入门小Demo-3 初始化 angular.min.js"> 请输入你的姓名:<input ng-model...理解 $scope: $scope 的使用贯穿整个 AngularJS App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新...3.8 内置服务 我们的数据一般都是从后端获取的,那么如何获取数据呢?我们一般使用内置服务$http来实现。注意:以下代码需要在tomcat中运行。

    2.4K30

    angularJS的DOM操作

    AngularJs是不直接操作DOM的,但是在平时的开发当中,我们有的时候还是需要操作一些DOM的,如果使用原生的JS的话操作过于麻烦,所以大家一般都是使用jQuery,jQuery虽然好用,但是AngularJs...是不建议和JQuery同时使用的,所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite       查阅官方提供的api,可以看到使用方法是angular.element(ele)...使用ng-app(如ng-app="myApp")时,js就必须申明var myApp = angular.module('myApp', []);,否则会报错误。...,选择器选择性筛选 clone()-创建一个匹配的元素集合的深度拷贝副本 contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点 css() - 获取匹配元素集合中的第一个元素的样式属性的值...()-获取匹配的元素集中第一个元素的属性(property)值 ready()-当DOM准备就绪时,指定一个函数来执行 remove()-将匹配元素集合从DOM中删除。

    9410
    领券