内置指令
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>
原文地址：https://www.cnblogs.com/wuqiuxue/p/8410435.html
时间： 2024-08-12 12:58:45