AngularJS 通过 ng-directives(指令)扩展了HTML
AngularJS 通过内置的指令来为应用添加新的功能。
AngularJS 允许你自定义指令。
AngularJS指令
AngularJS 指令是扩展的HTML属性,带有前缀ng-
创建自定义指令:可以使用.directive函数来添加自定义的指令。
要调用自定义指令,HTML元素上需要添加自定义指令名。
使用驼峰法来命名一个指令,runoobDirective, 但在使用它时需要以-分割,runoob-directive:
例子:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);app.directive("runoobDirective", function() { return { template : "<h1>自定义指令</h1>" };
});
</script>
</body>
通过添加restrict属性,并设置值只为A,来设置指令只能通过属性的方式来调用。
var app = angular.module('myApp',[]);
app.directive("runoobDirective",function(){
return{
restrict:"A",
template:"<h1>自定义指令</h1>"
};
});
restrict值可以有以下几种
E作为元素名使用
A作为属性使用
C作为类名使用
M作为注释使用
默认值为EA
AngularJS控制器
AngularJS应用程序被控制器控制。
ng-controller指令定义了应用程序控制器。
控制器是javaScript对象,由标准的javaScript对象的构造函数创建。
应用解析:
AngularJS 应用程序由ng-app定义。应用程序在
内运行。
ng-controller="myCtrl"�属性是一个 AngularJS 指令。用于定义一个控制器。
myCtrl函数是一个 JavaScript 函数。
AngularJS 使用$scope对象来调用控制器。
在 AngularJS 中, $scope 是一个应用对象(属于应用变量和函数)。
控制器的$scope(相当于作用域、控制范围)用来保存AngularJS Model(模型)的对象。
控制器在作用域中创建了两个属性 (firstName和lastName)。
ng-model指令绑定输入域到控制器的属性(firstName 和 lastName)。
AngularJS 过滤器
currency 格式化数字为货币格式
filter从数组项中选择一个子集
lowercase格式化字符串为小写
orderBy根据某个表达式排列数组
uppercase格式化字符串为大写