angularjs指令作用及用法
2015-12-03 16:37
232 查看
您可自由转发此文, 但请保留出处:Ionic在线学习网站 http://www.ioniconline.com
1.ng-app
作用:定义了 AngularJS 应用程序的 根元素。
[code] 例1:构建的是一整套的angular应用,那么应该将ng-app作为<html>标签的一部分 像: <html ng-app="HealthKnowledge"> ....... </html> 这就告知angular管理页面中所有的DOM元素。 例2:现有一个应用,这应用中期望使用像java、rails这样的技术来管理DOM,你就可以把ng-app放在某元素上(像页面上的<div>元素)告知angular来管理页面的某一部分 像: <html> ....... <div ng-app="HealthKnowledge"> ........</div> ....... </html>
2.NG-INIT
作用:初始化应用程序数据。
[code] 例: <div ng-app="" ng-init="firstName='John'"> <p>在输入框中尝试输入:</p> <p>姓名:<input type="text" ng-model="firstName"></p> <p>你输入的为: {{ firstName }}</p> </div> 通常情况下,不使用 ng-init。您将使用一个控制器或模块来代替它。
3.NG-BIND
作用: 显示和更新文本。
[code] 例:<p ng-bind="greeting"></p> 模型变量greeting的值就会显示在html中. 等价效果: <p>{{greeting}}</p> 两者的区别:使用双括号语法,在应用加载index.html的时候,angular用数据替换大括号前,用户也能看到未渲染的模块. ng-bind这种形式就不会。
4.NG-MODEL
作用: 绑定 HTML 元素 到应用程序数据。也可以为应用程序数据提供类型验证(number、email、required)。为应用程序数据提供状态(invalid、dirty、touched、error)。为 HTML 元素提供 CSS 类。绑定 HTML 元素到 HTML 表单。
5.NG-CHANGE
作用:根据ng-model元素的变化,作出相应的变化。
6.NG-CONTROLLER
作用:指定html属于哪个控制器。
[code] 例1:绑定一个复选框到属性 <form ng-controller="somecontroller"> <input type="checkbox" ng-model="checkedit"> </form> 选中它, somecontroller中的$scope 一个叫checkedit属性值会变成true。不选中的话checked就是false,相反改变checkedit的值也会改变复选框的选择情况。 例2:绑定一个输入框用ng-change 属性来指定一个控制器的方法,当用户输入的值发生变化时将被调用 <form ng-controller="StartUpController"> Starting: <input ng-change="computeNeeded()" ng-model="funding.startingEstimate"> Recommendation: {{funding.needed}} </form> 对应controller中 function StartUpController($scope) { $scope.funding = { startingEstimate: 0 }; $scope.computeNeeded = function() { $scope.funding.needed = $scope.funding.startingEstimate*10;}; } 上面会有潜在问题:当用户在输入框中输入时,我 们只是重新计算了需要的数量。如果在这种场景下当用户输入时,输入框只是做了更新,这 看上去运行的很好。但是倘若其他的输入框也绑定到这个模型的属性该怎么办?倘若当来自 服务器的数据,是否会更新呢? 这时我们可以用$scope的$watch函数更新这个字段。 在StartUpController最下面添加: $scope.$watch('funding.startingEstimate', computeNeeded); 这时ng-change可以去掉了,因为功能被$watch代替了,
7.NG-SUBMIT
作用:管理多个输入框的表单,那么你可以在表单上用 ng-submit 标识符指 定一个函数,当表单整体结束提交时调用这个函数。
[code] 例: <form ng-submit="requestFunding()" ng-controller="StartUpController"> Starting: <input ng-change="computeNeeded()" ng-model="startingEstimate"> Recommendation: {{needed}} <button>Fund my startup!</button> </form> function StartUpController($scope) { $scope.computeNeeded = function() { $scope.needed = $scope.startingEstimate * 10; }; $scope.requestFunding = function() { window.alert("Sorry, please get more customers first."); }; }
8.NG-REPEAT
作用:重复HTML元素
[code] 例: <div ng-app="" ng-init="names=['Jani','Hege','Kai']"> <p>使用 ng-repeat 来循环数组</p> <ul> <li ng-repeat="x in names"> {{ x }} </li> </ul> <div>
9.NG-CLASS
作用:用于动态自定义dom元素的css class name。
在实际的应用场景中还是比较灵活的,而在AngularJS中一般有四种方式给元素的class属性做一些门道, 如下:9.1scope变量绑定(不推荐使用)
[code]function ctr($scope){ $scope.test =“classname”; } <div class=”{{test}}”></div>
这种方式完全没错,是angular提供的一种改变class的方式,但是在controller涉及了classname在我看来是乎总是那么诡异,我希望的是controller是一个干净的纯javascript意义的object。
9.2字符串数组形式
[code]function Ctr($scope) { $scope.isActive = true; } <div ng-class="{true: 'active', false: 'inactive'}[isActive]"></div>
其结果是2中组合,isActive表达式为true,则 active,负责inactive。
9.3表达式形式
[code]function Ctr($scope) { } <div ng-class="row.point >=0?'style1':'style2'" ></div>
当point>0的时候执行style1,否则style2
9.4对象key/value处理
[code]function Ctr($scope) { } <div ng-class = "{'selected': isSelected, 'car': isCar}"></div>
当 isSelected = true 则增加selected class,当isCar=true,则增加car class。以此类推。
10.NG-STYLE
作用:用来设置元素的style属性的css值
[code]例: <input type="button" value="set color" ng-click="myStyle={color:'red'}"> <input type="button" value="set background" ng-click="myStyle={'background-color':'blue', color: 'black'}"> <span ng-style="myStyle">Sample Text</span>
ng-style指定的表达式必须是个单层的json对象,key和value对应css属性的名称和值。注意如果css属性名中有“-”连接符,需要用引号括起来。
相关文章推荐
- AngularJS - MVC 模型
- AngularJS – 指令
- AngularJS-模板和数据绑定
- AngularJS – 与服务器通讯
- AngularJs $resource 高大上的数据交互
- angularjs中provider、factory和service三者的写法与区别
- AngularJS directive简述
- AngularJS处理ASP.Net MVC Json返回日期
- AngularJS进阶(十六)脏值检查
- AngularJS进阶(十六)脏值检查
- angularjs之ui-bootstrap和ui-router结合使用
- angularjs之ui-bootstrap的使用
- angularjs-ui-router的使用
- angularjs指令的使用
- 我的第一篇博客随笔:关于angularjs API的理解心得。angular.bind() angular.boostrap()
- AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large
- AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
- AngularJS进阶(十四)AngularJS灵异代码事件
- AngularJS进阶(十四)AngularJS灵异代码事件