今天讲一下angularjs的表达式以及指令
- 表达式
(1)其实表达式非常简单,跟js中的表达式相似,表达式中可以是变量,数字,以及文字等,angular的表达式写法也非常简单就是双花括号{{ }}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="">
<h1>3+4等于{{3+4}}</h1>
</div>
</body>
</html>
或者说我们初始化两个变量使用ng-init指令
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="x=3;y=4">
<h1>3+4等于{{x+y}}</h1>
</div>
</body>
</html>
结果不变
2.下面我们说一下指令
其实angular就是通过指令来扩展html的
其实指令我们可以使用内置指令也可以自定义指令,内置指令很好理解就是我们那些ng-开通的命令,后期我们会用到很多内置指令例如ng-app,ng-init,ng-controller,ng-repeat等,在这不多说了,我们主要来说一下自定义指令
我们来写一个名为Test的自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<runoob-test></runoob-test>
<script>
var app = angular.module("myApp", []);
app.directive("runoobTest", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>