AngularJS ng-select指令原理

AngularJS ng-select指令原理

/* created by Jane/Santaizi 1/20/2016 GitHub:http://imnaohaing.github.io */
/* 内容由哪吒三太子提供,转载请注明:转自:哪吒三太子 <— 优秀的高品格程序员都互相尊重彼此的劳动 —>*/
在 AngularJS 教程中介绍了这个指令的使用方法:

<!doctype html>
<html ng-app="myApp">
<head>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js"></script>
</head>
<body>

<!-- 程序主体部分 -->
<div ng-controller="CityController">
  <select ng-model="city" ng-options="city.name for city in cities">
    <option value="">Choose City</option>
  </select>
  Best City: {{ city.name }}
</div>

<script>
angular.module('myApp', [])
.controller('CityController', function($scope) {
    $scope.cities = [
      {name: 'Seattle'},
      {name: 'San Francisco'},
      {name: 'Chicago'},
      {name: 'New York'},
      {name: 'Boston'}
    ];
});
</script>

</body>
</html>

上述代码可以直接在 记事本 中粘贴并另存为 html ,或者在线打开示例
http://jsbin.com/gifohegoma/edit?html,js,output
如果加载慢 则把

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>

换成

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.js"></script>

现在我们来看下重点语句

<select ng-model="city" ng-options="city.name for city in cities">

这句话中 ng-option 是 Angular的一个指令,它“解释”并编译执行引号(“”)中的语句 city.name for city in cities
具体流程如下:

  1. ng-model 指令在 CityController$scope域中创建一个名为 “city” 的属性
  2. ng-option 指令执行等号后面引号中的表达式语句
  3. city.name for city in cities 语句分两步
    1. city in cities$scope.cities中遍历获取每个 key-value 值对,并把字面量 {name: 'Seattle'} 对象赋值给 city
    2. city.name for city 从上面语句中获取的 city 对象中获取 city.name 属性所对应的值 此处为:“Seattle” 字符串
  4. 把上述所得到的 “Seattle” 字符串按位置放在 <select> 列表之中.

细心的读者已经发现了,并有疑问: city.name for city in cities 语句中的 “city” 和 ng-model="city"$scope中定义的属性 $scope.city到底有什么关系才导致名字都是相同的?
答案是其实这两者根本没关系! 现在我们把代码改写一下

<select ng-model="city" ng-options="city2.name for city2 in cities">

再运行上述代码,发现效果是一样的,没有任何变化。说明了在 ng-option后面的表达式中 除了 cities 是从 $scope.cities 属性获取的, city2 对象则是临时创建的对象,存在于一个隔离的区域中,不会与现有任何 $scope域发生冲突。 而 ng-model="city" 则只是把当前选中的选项的 label(在这里是Seattle)作为索引获取 $scope.cities 中的对象 {name: 'Seattle'} 赋值给 $scope.city (在这里也可理解为 city2 所获得的对象赋值给 $scope.city) 然后所有操作结束,等待下一次的选项改变。
上述就是 ng-select 指令的原理。

关于

本文为Jane/Santaizi原创,转载请署名Jane/Santaizi

你可能感兴趣的:(AngularJS)