當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS——第3章指令

發(fā)布時(shí)間：2025/5/22 javascript 60 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS——第3章指令小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

第3章指令

所謂指令就是AngularJS自定義的HTML屬性或標(biāo)簽，這些指令都是以ng-做為前綴的，例如ng-app、ng-controller、ng-repeat等。

3.1 內(nèi)置指令

ng-app 指定應(yīng)用根元素，至少有一個(gè)元素指定了此屬性。
ng-controller 指定控制器
ng-show控制元素是否顯示，true顯示、false不顯示
ng-hide控制元素是否隱藏，true隱藏、false不隱藏
ng-if控制元素是否“存在”，true存在、false不存在
ng-src增強(qiáng)圖片路徑
ng-href增強(qiáng)地址
ng-class控制類名
ng-include引入模板
ng-disabled表單禁用
ng-readonly表單只讀
ng-checked單/復(fù)選框表單選中
ng-selected下拉框表單選中
【示例1】

<body ng-app="App"> <ul ng-controller="DemoController"> <li ng-bind="name">綁定數(shù)據(jù)變量，顯示結(jié)果與{{name}}一樣</li><li>{{name}}</li><li ng-show="1">ng-show用來顯示過程隱藏內(nèi)容的，當(dāng)值為true時(shí)顯示</li><li ng-hide="1">ng-hide用來隱藏內(nèi)容，當(dāng)值為true時(shí)隱藏</li><li ng-if="1">ng-if用來控制元素是否存在，當(dāng)值為true時(shí)存在</li><li><img ng-src="{{path}}" alt="">ng-src用來增強(qiáng)圖片路徑，使用ng-src而不適用src的原因是src在頁面從上到下加載時(shí)就會(huì)直接請(qǐng)求src的資源，如果所給的是像path這樣的變量路徑，那么在第一次請(qǐng)求之后沒有請(qǐng)求到需要的內(nèi)容，在執(zhí)行到script時(shí)還會(huì)再加載一遍，浪費(fèi)資源，而ng-src不會(huì)直接被瀏覽器識(shí)別，只有在script的內(nèi)容加載玩后才會(huì)顯示，href同理</li><li ng-class="{red:true}">控制類名：ng-class="{}"中單括號(hào)表示對(duì)象</li></ul><script src="./libs/angular.min.js"></script><script>//創(chuàng)建Modelvar App = angular.module('App', []);//ControllerApp.controller('DemoController', ['$scope', function ($scope) {//$scope$scope.name = 'itcast';$scope.path = './images/author.jpg';$scope.link = '#';$scope.red= 'red';}]);</script> </body>

【示例2】ng-include

<body ng-app="App"><div ng-include="'./header.html'"></div><section>主體</section><div ng-include="'./footer.html'"></div><script src="./libs/angular.min.js"></script><script>var App = angular.module('App', []);</script> </body>

3.2 自定義指令

語法：App.directive('tag', function(){});
示例：

// 通過模塊實(shí)例對(duì)象的directive方法可以自定義指令 App.directive('tag', function () {// 返回一個(gè)對(duì)象，這個(gè)對(duì)象就是自定義指令相關(guān)的內(nèi)容return {// E element——元素// A attribute——屬性// C class——類// M mark replace——備注，必須為truerestrict: 'ECMA',// template: '<ul><li>首頁</li><li>列表</li></ul>',templateUrl: './list.html'// replace: true}});

轉(zhuǎn)載于:https://www.cnblogs.com/luoyu113/p/8544681.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的AngularJS——第3章指令的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： ubuntu ufw防火墙
下一篇：【页面传值6种方式】- 【JSP 页面传