angularJS1笔记--内置指令
Posted 有时你唱起歌 有时你沉默 有时你望着天空
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了angularJS1笔记--内置指令相关的知识，希望对你有一定的参考价值。
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.colorStyle {
color: #3e8f3e;
}
</style>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="firstController">
<p>{{1+1}}</p>
<p ng-bind="1+1">2</p>
<p ng-bind-template="{{1+1}}"></p>
<ul ng-init="cityArr = [\'上海\',\'北京\',\'广州\',\'深圳\']" ng-class="{colorStyle:status}"><!--初始化指令-->
<li ng-repeat="city in cityArr">
<span>当前元素:{{$index}}{{city}}</span>
<span>是否为头元素:{{$first}}</span>
<span>是否为非头非尾元素:{{$middle}}</span>
<span>是否为尾元素:{{$last}}</span>
</li>
</ul>
<!--加载另一个页面的指令-->
<div ng-include="\'other.html\'">
</div>
<div ng-include src="\'other.html\'">
</div>
<button ng-click="changeStatus($event)">切换状态</button>
<p>{{status}}</p>
<!--内置节点指令-->
<div ng-style="{\'color\':\'red\',\'margin-top\':\'20px\'}">
你好
</div>
<div ng-style="defaultStyle">
你好吗
</div>
<!--监听status属性的值-->
<ul ng-switch on="status">
<li ng-switch-when="true">
true
</li>
<li ng-switch-when="false">
false
</li>
</ul>
<img src="{{src}}"/>
<img ng-src="{{src}}"/>
</div>
</div>
<script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
<script type="text/javascript" src="app/index.js"></script>
<script>
</script>
</body>
</html>
other.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HI</title>
</head>
<body>
另一个页面
</body>
</html>
index.js:
var myApp = angular.module(\'myApp\', [])
.controller(\'firstController\',function ($scope) {
$scope.status = false;
$scope.changeStatus = function (event) {
console.log(event.target);
$scope.status = !$scope.status;
//angular.element把angular元素转换为jquery元素
angular.element(event.target).html(\'切换状态\'+$scope.status);
}
$scope.defaultStyle = {
color:\'red\',
\'margin-top\':\'50px\'
}
$scope.src = "http://www.angularjs.org/img/AngularJS-large.png";
})
运行结果：
以上是关于angularJS1笔记--内置指令的主要内容，如果未能解决你的问题，请参考以下文章
angularJS1笔记-(10)-自定义指令(templateUrl属性)
angularJS1笔记-(12)-自定义指令(compile/link)