1.anglurJS常用指令,自定义指令,连接代码块,控制器学习
常用的指令
-
ng-app 指令
ng-app 指令定义了 AngularJS 应用程序的 根元素。
ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。
稍后您将学习到 ng-app 如何通过一个值（比如 ng-app=“myModule”）连接到代码模块。 -
ng-init 指令
ng-init 指令为 AngularJS 应用程序定义了 初始值。
通常情况下，不使用 ng-init。您将使用一个控制器或模块来代替它。
稍后您将学习更多有关控制器和模块的知识。 -
ng-model 指令
ng-model 指令 绑定 HTML 元素 到应用程序数据。
ng-model 指令也可以：
为应用程序数据提供类型验证（number、email、required）。
为应用程序数据提供状态（invalid、dirty、touched、error）。
为 HTML 元素提供 CSS 类。
绑定 HTML 元素到 HTML 表单。 -
ng-repeat 指令
ng-repeat 指令对于集合中（数组中）的每个项会 克隆一次 HTML 元素。 -
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令, 但在使用它时需要以 - 分割, nameSelf => name-self
常用的方法
- controller方法
app.controller('myCtrl', ($scope)=>{
$scope.firstname = "威尔";
});
app.controller('myCtrl', function($scope){
$scope.firstname = "威尔";
});
app.controller('myCtrl', ['$scope', function($scope) {
$scope.firstname = "威尔";
}]);
- directive方法
app.directive('myLable', function () {
return {
restrict: "EAMC",
template: "呦呦切克闹",
//replace : true//我们需要在该实例添加 replace 属性， 否则评论是不可见的。
}
})
注意事项
- ng-init可用于ng-repeat这些特殊指令,如下面例子,可以使用ng-init定义当前循环的index
<div ng-repeat="value in innerList" ng-init="innerIndex = $index">
<span> {{innerIndex}}</span>
</div>
- directive方法特性
- 当同时调用first和second时,只有first生效,两个template不会同时出现。
- 当设置了 scope:{} 之后,{{name}}获取不到了,原因就是作用域的问题,想要设置这里的name的值,可以再加一个controller的字段。
参数详情如下
angular.module('myApp', []).directive('first', [ function(){
return {
scope: false, //默认值为 false 共享父作用域 值为true时共享父级作用域并创建指令自己的
controller: function($scope, $element, $attrs, $transclude) {},
//作用域 值为{}时创建全新的隔离作用域, 值为string时为控制器名称
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: 'first name:{{name}}',//值为string、function 用于显示dom元素
templateUrl: 'xxx.html' //值为string function 以id为xxx.html为 调用文件显示
priority: 0 //指明指令的优先级，若在dom上有多个指令优先级高的先执行
replace: flase // 默认值为false 当为true是直接替换指令所在的标签
terminal: true //值为true时优先级低于此指令的其它指令无效
link:function // 值为函数 用来定义指令行为从传入的参数中获取元素并进行处理
};
}])
- 多个自定义组件的template只能显示出一个
- ng-model 是用于表单元素的，支持双向绑定。对普通元素无效；
ng-bind 用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
当 ng-bind 和 {{}} 同时使用时，ng-bind 绑定的值覆盖该元素的内容。
用 ng-bind 比 {{}} 友好很多。 - 有时候绑定 ngModel 到一个 getter/setter 函数时很有用的。getter 是一种能返回一个模型表示的无参函数，setter 是只有一个参数的用于设置模型内部状态的函数。 它对于模型内部与视图显示时所用的数据形式不一致时非常有用。
要使用它，你需要添加 ng-model-options="{ getterSetter: true }" 到一个有 ng-model 元素上。你也可以添加 ng-model-options="{ getterSetter: true }" 到 上，使的表单中的所有 都生效。
这个方法的好处在于我们可以将整个表单作为一个对象去处理
ngModel 绑定 getter/setter 实例
代码举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
//ng-model指令对于表单控件的值的双向绑定
名:<input type="text" ng-model="firstname"/><br/>
姓:<input type="text" ng-model="lastname"/><br/>
姓名:{{firstname + ' * ' + lastname}}<br/>
外国名:{{person.firstName+'*'+person.lastName}}<br/><br/>
//ng-repeat 指令遍历字符数组:
<ul>
<li ng-repeat="item in array">
{{item}}
</li>
</ul>
//ng-repeat 指令遍历对象数组:
<table border="1">
<tr>
<th>姓名</th>
<th>国籍</th>
</tr>
<tr ng-repeat="item in foregins">
<td>{{item.name}}</td>
<td>{{item.country}}</td>
</tr>
</table>
//注意:多个template只能显示出一个
各种方式调用自定义指令:
一般方式调用自定义指令:<my-lable/>
类名方式调用自定义指令:<span type="text" class="my-lable"/>
属性方式调用自定义指令:<span type="text" my-lable/>
注释方式调用自定义指令:<!-- directive: my-lable -->
</div>
</body>
<script>
//AngularJS 模块定义应用:
// 通过ng-app的值连接到代码块
var app = angular.module('myApp', []);
// AngularJS 控制器控制应用:
//通过 .controller 方法初始化变量
app.controller('myCtrl', ($scope)=>{
$scope.firstname = "威尔";
$scope.lastname = '史密斯';
$scope.person = {firstName: 'Will', lastName: 'Smith'};
$scope.array = ['zhangcongying', 'hanchuang', 'yaobo', 'heqi', 'liuyuan', 'ganweiling'];
$scope.foregins = [
{name: 'Jani', country: 'Norway'},
{name: 'Hege', country: 'Sweden'},
{name: 'Kai', country: 'Denmark'}]
});
// 通过 .directive方法添加自定义的指令
app.directive('myLable', function () {
return {
restrict: "EAMC",
template: "呦呦切克闹",
//replace : true//我们需要在该实例添加 replace 属性， 否则评论是不可见的。
}
})
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
