當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS——第3章指令

發布時間：2025/5/22 javascript 48 豆豆

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

第3章指令

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

3.1 內置指令

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

<body ng-app="App"> <ul ng-controller="DemoController"> <li ng-bind="name">綁定數據變量，顯示結果與{{name}}一樣</li><li>{{name}}</li><li ng-show="1">ng-show用來顯示過程隱藏內容的，當值為true時顯示</li><li ng-hide="1">ng-hide用來隱藏內容，當值為true時隱藏</li><li ng-if="1">ng-if用來控制元素是否存在，當值為true時存在</li><li><img ng-src="{{path}}" alt="">ng-src用來增強圖片路徑，使用ng-src而不適用src的原因是src在頁面從上到下加載時就會直接請求src的資源，如果所給的是像path這樣的變量路徑，那么在第一次請求之后沒有請求到需要的內容，在執行到script時還會再加載一遍，浪費資源，而ng-src不會直接被瀏覽器識別，只有在script的內容加載玩后才會顯示，href同理</li><li ng-class="{red:true}">控制類名：ng-class="{}"中單括號表示對象</li></ul><script src="./libs/angular.min.js"></script><script>//創建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(){});
示例：

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

轉載于:https://www.cnblogs.com/luoyu113/p/8544681.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

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