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