angular中的指令及理解

2017-01-10 本文已影响90人 Lusia_

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>"; });