Angular——內置指令
阿新 • • 發佈：2018-02-03
ted ado bug lang sco 元素 單選 sel charset
內置指令
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下拉框表單選中
基本使用
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .red { color: red; } .blue { color: blue; } .yellow { color: yellow; } </style> </head> <body ng-app="App"> <div ng-controller="DemoController"> <h1 ng-show="false">ng-show</h1> <h1 ng-hide="true">ng-hide</h1> <h1 ng-if="false">ng-if</h1> <img ng-src="{{path}}"> <span ng-class="{red:true,blue:true}">ng-class</span> </div> <script src="../libs/angular.min.js"></script> <script> var App = angular.module(‘App‘, []); App.controller(‘DemoController‘, [‘$scope‘, function ($scope) { $scope.path = ‘./images/2203.png‘; }]); //ng-if可以將元素直接移除，ng-show與ng-hide頁面雖然看不到，但是檢查依然可以看見 //ng-src scr的值若是一個綁定的值，瀏覽器渲染的時候會發送請求，因為沒解析到腳本，所以不認識這裏會有一個小bug，直到 //解析到了腳本以後才會去替換這個img標簽裏src的值 //ng-href同上 </script> </body> </html>
Angular——內置指令