AngularJS (1)
AngularJS 扩展了 HTML (MVC)
view(视图):html
model(模型):可用的数据
Controller(控制器): js
AngularJS 通过 ng-directives 扩展了 HTML。
指令:
ng-app 指令定义一个 AngularJS 应用程序。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。(有四个状态:(invalid, dirty, touched, error):)
ng-bind 指令把应用程序数据绑定到 HTML 视图。{{ss}} = (ng-bind='ss')
ng-init 指令初始化应用程序数据。
ng-repea 使用 ng-repeat 来循环数组(对象)
ng-empty
ng-not-empty
ng-touched
ng-untouched
ng-valid
ng-invalid
ng-dirty
ng-pending
ng-pristine
AngularJS 自定义指令
<body ng-app="myApp"> -- 根元素
调用方法1:元素名
<runoob-directive></runoob-directive>
调用方法2:属性
<div runoob-directive2></div>
<div runoob-directive></div>
调用方法3:类名
<div class="runoob-directive3"></div>
调用方法4:注释
<!-- 指令: runoob-directive4 -->
<script>
1.自定义 runoob-directive 指令
var app = angular.module("myApp", []);
//定义可以使用class(元素名和属性名) 来获取
app.directive("runoobDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
//定义可以使用class(属性) 来获取
app.directive("runoobDirective2", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
//定义可以使用class(类名) 来获取
app.directive("runoobDirective3", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
//定义可以使用class(注释) 来获取
app.directive("runoobDirective4", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</script>
restrict 值:
E
作为元素名使用A
作为属性使用C
作为类名使用M
作为注释使用
</body>