内置指令
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>