http://www.runoob.com/angularjs/angularjs-directives.html
理解：
- angular先载入html片段，在加载到<script>标签的时候加载了所有的js库；
- 加载完angular库之后，就会自动寻找html中的ng-app指令，创建rootscope作用域；
- ng-app在编译时，默认保留其所有子节点，再去寻找其中的ng-controller指令，并且把之前读取到的控制器方法传入对应的ng-controller上面、执行。继承rootscope生成一个子scope作用域
- 控制器里面的指令如何编译：把控制器内部变量赋值给控制器里对应的指令，然后编译
一、ng-repeat
获取使用filter过滤后的ng-repeat的数据长度：
<li ng-repeat="data in dataList | filter:{type:1} as newList">
//newList.length是过滤之后的数据长度
- ng-repeat中的track by----去除重复象
<div ng-repeat="(key,value) in links track by key">
</div>
二、ui-sref、$state.go
<a ui-sref="message-list">消息中心</a>
.controller('firstCtrl', function($scope, $state) {
$state.go('login'); //一般使用在 controller里面
});
三、ng-include
用于包含外部的 HTML 文件
四、ng-options
使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model="selectedName" ng-options="x for x in names"></select>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope)
{
$scope.names = ["Google", "Runoob", "Taobao"];
});
</script>
与ng-repeat区别：
ng-repeat 指令是通过数组来循环 HTML 代码来创建下拉列表，但 ng-options 指令更适合创建下拉列表，优势：
使用 ng-options 的选项的一个对象， ng-repeat 是一个字符串。
<select>
<option ng-repeat="x in names">{{x}}</option>
</select>
举例：
$scope.sites = [ {site : "Google", url : "http://www.google.com"},
{site : "Runoob", url : "http://www.runoob.com"},
{site : "Taobao", url : "http://www.taobao.com"}];
1、
<select ng-model="selectedSite" ng-options="x.site for x in sites">
</select>
<h1>你选择的是: {{selectedSite}}</h1>
![IJ4)16}7AT_3F9E6O2Y@2I.png
http://www.runoob.com/try/try.php?filename=try_ng_select_selected
2、
<select ng-model="selectedSite">
<option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}
</option>
</select>
<h1>你选择的是: {{selectedSite}}</h1>
五、ng-bind-html
通一个安全的方式将内容绑定到 HTML 元素上
引用：
<p ng-bind-html="myText"></p>
js代码：
var app = angular.module("myApp", ['ngSanitize']); app.controller("myCtrl", function($scope) { $scope.myText = "My name is: <h1>John Doe</h1>"; });
*、指令
![R%KXB9N(}0AS4BQTMN]1TEF.png](https://img.haomeiwen.com/i2452733/3cb24291ac9436aa.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
Paste_Image.png
五、事件
Paste_Image.png
六、属性验证
Paste_Image.png
[参考手册]
http://www.runoob.com/angularjs/angularjs-reference.html
网友评论