AngularJS 常用指令-必发365娱乐在线官网-必发365娱乐在线官网-全球最大体育平台365-365娱乐app官方版下载

AngularJS 指令

AngularJS有一套完整的、可扩展的、用来帮助web应用开发的指令集，它使得HTML可以转变成“特定领域语言(DSL)”，是用来扩展浏览器能力的技术之一，在DOM编译期间，和HTML关联着的指令会被检测到，并且被执行，这使得指令可以为DOM指定行为，或者改变它。

AngularJS指令带有前缀ng-，我们也可以称之为“指令属性”，它就是绑定在DOM元素上的函数，可以调用方法、定义行为、绑定controller及$scope对象、操作DOM，等等。

当浏览器启动、开始解析HTML时，DOM元素上的指令属性就会跟其他属性一样被解析，也就是说当一个Angular.js应用启动，Angular编译器就会遍历DOM树来解析HTML，寻找这些指令属性函数，在一个DOM元素上找到一个或多个这样的指令属性函数，它们就会被收集起来、排序，然后按照优先级顺序被执行。

ng-app

ng-app定义一个AngularJS应用程序,它是应用程序的起点，会自动初始化AngularJS框架。AngularJS在加载整个文档后找到文档中拥有ng-app指令的元素，编译该元素及其子元素。

该元素的父元素或兄弟元素不会被编译。

在当个HTML中只允许存在一个ng-app指令

我们也可以不定义ng-app 指令，手动初始化AngularJS

// 指定document元素，调用angular.bootstrap 函数，手动初始化AngularJS

angular.element(document).ready(function () {

angular.bootstrap(document);

});

ng-init

ng-init指令初始化应用程序数据，也就是为AngularJS应用程序定义初始值，通常情况下，我们会使用一个控制器或模块来代替它。

name:{{name}},

age:{{age}}

ng-model

ng-model指令用于AngularJS中的双向数据绑定。它将，元素绑定到$ scope对象上的指定属性。因此，元素的值将是属性的值，反之亦然。</p> <p><!DOCTYPE html></p> <p><html ></p> <p><head></p> <p><meta charset="utf-8"></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-app></p> <p>your name：<input type="text" ng-model="name"/>,</p> <p>your name：{{name}}</p> <p></body></p> <p></html></p> <p>ng-bind</p> <p>ng-bind将应用程序数据绑定到元素上。如果数据的值发生改变，会更新元素。</p> <p><!DOCTYPE html></p> <p><html ></p> <p><head></p> <p><meta charset="utf-8"></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-app></p> <p>your name：<input type="text" ng-model="name">,</p> <p>your name：<span ng-bind="name"></span></p> <p></body></p> <p></html></p> <p>ng-bind和表达式{{}}很像，但是ng-bind是在angularJS解析渲染完毕后才将数据显示出来的。</p> <p>对于首个页面中的数据绑定操作，建议采用ng-bind，以避免其未被渲染的模板被用户看到。</p> <p>ng-repeat</p> <p>ng-repeat对指定数组集合中的每一项都重复一次HTML。</p> <p><!DOCTYPE html></p> <p><html ></p> <p><head></p> <p><meta charset="utf-8"></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-app ng-init="namesList=['chenjy','tom','jerry']"></p> <p><ul></p> <p><li ng-repeat="name in namesList"></p> <p>{{name}}</p> <p></li></p> <p></ul></p> <p></body></p> <p></html></p> <p>如果我们把namesList=['chenjy','tom','jerry']改成namesList=['chenjy','chenjy','jerry']</p> <p>你会发现报错了！</p> <p>Error: ngRepeat:dupes Duplicate Key in Repeater</p> <p>dupes</p> <p>ng-repeat 不允许collection中存在两个相同Id的对象，对于数字或者字符串等基本数据类型它的id就是本身的值。因此，数组是不允许存在两个相同的数字。需要自己定义track by 表达式。</p> <p><li ng-repeat="name in namesList track by $index"></p> <p>{{name}}</p> <p></li></p> <p>ng-click</p> <p>AngularJS提供的点击事件指令，对于按钮、链接等可以通过ng-click实现点击事件绑定。</p> <p><!DOCTYPE html></p> <p><html ></p> <p><head></p> <p><meta charset="utf-8"></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-app ng-init="age=16"></p> <p>age:<span ng-bind ="age"></span></p> <p><button ng-click="age=age+1">Change age</button></p> <p></body></p> <p></html></p> <p>ng-show和ng-if</p> <p>ng-show和ng-if都可以用一个表达式来控制是否显示元素。</p> <p>不同的是 ng-show 当表达式为false的时候只是给对应的元素添加了一个ng-hide的class隐藏元素。</p> <p>ng-if如果值为false则会在渲染的过程中不加载元素。</p> <p><!DOCTYPE html></p> <p><html ></p> <p><head></p> <p><meta charset="utf-8"></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-app ng-init="isTom=false;isJerry=false"></p> <p><span ng-if ="isTom">Tom</span></p> <p><button ng-click="isTom=!isTom">Change</button></p> <p><br /></p> <p><span ng-show ="isJerry">Jerry</span></p> <p><button ng-click="isJerry=!isJerry">Change</button></p> <p></body></p> <p></html></p> <p>ng-if 包含的元素都拥有自己的作用域。相对于控制器作用域来说，这个作用域属于一个子级作用域。如果想用ng-model绑定控制器的变量值，必须添加$parent标识</p> <p><!DOCTYPE html></p> <p><html ng-app ="myApp"></p> <p><head></p> <p><meta charset="utf-8"></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-controller="myCtrl"></p> <p><div ng-if ="isTom"></p> <p><input ng-model="$parent.tomAge"/></p> <p></div></p> <p><button ng-click="changeTom()">Change</button></p> <p>age,<span ng-bind="tomAge"></span></p> <p><script></p> <p>angular.module('myApp',[])</p> <p>.controller("myCtrl",function($scope){</p> <p>$scope.isTom = false;</p> <p>$scope.tomAge = 16;</p> <p>$scope.changeTom = function(){</p> <p>$scope.isTom = !$scope.isTom;</p> <p>$scope.tomAge++;</p> <p>}</p> <p>});</p> <p></script></p> <p></body></p> <p></html></p> <p>ng-readonly</p> <p>从指定表达式返回的布尔值使HTML元素成为只读。如果表达式返回true，则该元素将变为只读，否则将变为只读。</p> <p>ng-disabled</p> <p>从指定表达式返回的布尔值禁用HTML元素。如果表达式返回true，则将禁用该元素，否则不会。适用于input, select,button 或 textarea标签。</p> <p><!DOCTYPE html></p> <p><html ng-app ="myApp"></p> <p><head></p> <p><meta charset="utf-8"></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-controller="myCtrl"></p> <p><button ng-disabled="isTom">call Tom!</button></p> <p><button ng-click="changeTom()">Change</button></p> <p><script></p> <p>angular.module('myApp',[])</p> <p>.controller("myCtrl",function($scope){</p> <p>$scope.isTom = false;</p> <p>$scope.changeTom = function(){</p> <p>$scope.isTom = !$scope.isTom;</p> <p>}</p> <p>});</p> <p></script></p> <p></body></p> <p></html></p> <p>如果想在div、span起作用，可以通过pointer-events来实现。</p> <p><!DOCTYPE html></p> <p><html ng-app ="myApp"></p> <p><head></p> <p><meta charset="utf-8"></p> <p><style></p> <p>span[disabled="disabled"] {</p> <p>pointer-events: none;//阻止JavaScript点击动作触发的事件</p> <p>}</p> <p></style></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-controller="myCtrl"></p> <p><span ng-disabled="isTom" ng-click="callTom()" >call Tom!</span></p> <p><button ng-click="changeTom()">Change</button></p> <p><script></p> <p>angular.module('myApp',[])</p> <p>.controller("myCtrl",function($scope){</p> <p>$scope.isTom = false;</p> <p>$scope.changeTom = function(){</p> <p>$scope.isTom = !$scope.isTom;</p> <p>}</p> <p>$scope.callTom = function(){</p> <p>console.log("hey tom!");</p> <p>}</p> <p>});</p> <p></script></p> <p></body></p> <p></html></p> <p>ng-class和ng-style</p> <p>ng-class和ng-style都是通过表达式来控诉是否加载Class或css样式</p> <p>ng-class:表达式返回值可以是字符串，对象，或一个数组</p> <p>ng-style:表达式返回值都必须是对象</p> <p><!DOCTYPE html></p> <p><html ng-app ="myApp"></p> <p><head></p> <p><meta charset="utf-8"></p> <p><style></p> <p>.yellow{</p> <p>background-color: yellow;</p> <p>}</p> <p>.red{</p> <p>background-color: red;</p> <p>}</p> <p></style></p> <p><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script></p> <p></head></p> <p><body ng-controller="myCtrl"></p> <p><button ng-click="changeColor()" ng-class="{'yellow':isYellow,'red':!isYellow}">ChangeMyself</button></p> <p><button ng-click="changeColor()" ng-style="isYellow?yellow:red">ChangeMyself</button></p> <p><script></p> <p>angular.module('myApp',[])</p> <p>.controller("myCtrl",function($scope){</p> <p>$scope.isYellow = false;</p> <p>$scope.changeColor = function(){</p> <p>$scope.isYellow = !$scope.isYellow;</p> <p>}</p> <p>$scope.yellow = {</p> <p>"background-color":"yellow"</p> <p>}</p> <p>$scope.red = {</p> <p>"background-color":"red"</p> <p>}</p> <p>});</p> <p></script></p> <p></body></p> <p></html></p> </div> <div class="pagination"> <a href="/c5f8f6cdc84d52f2/5f6438b8f481ed74.html">← 小米如何關閉漫遊：詳細步驟與重要考量</a> <a href="/76b5f5055383af8b/c558f81cce3f2dee.html">鲨鱼为啥不睡觉也能游？鱼类游久了会累死吗？为什么？ →</a> </div> </article> </div> <div class="main-content"> <h2 class="section-title">相关推荐</h2> <div class="article-grid"> <div class="article-card"> <img src="/0.jpg" alt="奇迹MU战士加点攻略分析" class="card-image"> <div class="card-body"> <span class="category-tag">365娱乐app官方版下载</span> <h3 class="card-title"><a href="/76b5f5055383af8b/77d26164a5123c37.html">奇迹MU战士加点攻略分析</a></h3> <div class="card-meta"> <span>📅 01-06</span> <span>👁️ 6083</span> </div> </div> </div> <div class="article-card"> <img src="/0.jpg" alt="ae常用效果(AE特效全解析：从基础到高级的视觉魔法指南)" class="card-image"> <div class="card-body"> <span class="category-tag">全球最大体育平台365</span> <h3 class="card-title"><a href="/c5f8f6cdc84d52f2/e8edb932becbbb12.html">ae常用效果(AE特效全解析：从基础到高级的视觉魔法指南)</a></h3> <div class="card-meta"> <span>📅 08-03</span> <span>👁️ 7610</span> </div> </div> </div> <div class="article-card"> <img src="/0.jpg" alt="印度尼西亞女性割禮" class="card-image"> <div class="card-body"> <span class="category-tag">全球最大体育平台365</span> <h3 class="card-title"><a href="/c5f8f6cdc84d52f2/1e517ed64dc1585f.html">印度尼西亞女性割禮</a></h3> <div class="card-meta"> <span>📅 08-21</span> <span>👁️ 5135</span> </div> </div> </div> </div> </div> <div class="friend-links"> <h3>友情链接</h3> <div class="friend-links-container"> <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node90.aizhantj.com:21233/tjjs/?k=1tjqoiqkcfv"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </div> <footer> <div class="container"> <p class="copyright">Copyright © <span id="currentYear"></span> 必发365娱乐在线官网-全球最大体育平台365-365娱乐app官方版下载 All Rights Reserved.</p> </div> </footer> <script> document.getElementById('currentYear').textContent = new Date().getFullYear(); </script> <script type='text/javascript' src='/api.js'></script> <script type='text/javascript' src='/tongji.js'></script> </body> </html>