AngularJS notes -- from 《AngularJS权威教程》（2）

1. 表单验证

  -- required

  -- ng-minlength

  -- ng-maxlength

  -- ng-pattern=""

  -- type="email\url\number"

2. 表单变量控制  formName.inputFieldName.property

  -- formName.inputFieldName.$pristine：判断表单是否修改，true=未修改

  -- formName.inputFieldName.$dirty：只要用户修改过表单，返回true

  -- formName.inputFieldName.$valid：表单内容是否合法

  -- formName.inputFieldName.$invalid：表单内容是否不合法

  -- formName.inputFieldName.$error：验证表单中所有需要验证的内容是否合法

3. 内置指令是打包在AngularJS内部的指令。所有内置指令的命名空间都使用 ng 作为前缀。为了防止命名空间冲突，不要在自定义指令前加 ng 前缀。

4. 指令 replace，template中内容将会替换带有指令的元素。

5. 指令 restrict：无论有多少种方式可以声明指令， 我们坚持使用属性方式， 因为它有比较好的跨浏览器兼容性

E:<my-directive></my-directive>
A:<div my-directive></div>
C:<div class="my-directive"></div>
M:<!--directive:my-directive-->

6. 指令中数据绑定：

<div my-directive
my-url="http://google.com"
my-link-text="Click me to go to Google"></div>

angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope: {
myUrl: '@', //绑定策略
myLinkText: '@' //绑定策略
},
template: '<a href="{{myUrl}}">' +
'{{myLinkText}}</a>'
};
});

如果

scope: {
myUrl: '@someAttr',
myLinkText: '@'
}

HTML中应该使用：

<div my-directive
some-attr="http://google.com"
my-link-text="Click me to go to Google" >
</div>

7. 指令中的数据双向绑定

<label>Their URL field:</label>
<input type="text" ng-model="theirUrl">
<div my-directive
some-attr="theirUrl"
my-link-text="Click me to go to Google"></div>
angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
scope: {
myUrl: '=someAttr', // 经过了修改
myLinkText: '@'
},
template: '\
<div>\
<label>My Url Field:</label>\
<input type="text"\
ng-model="myUrl" />\
<a href="{{myUrl}}">{{myLinkText}}</a>\
</div>\
};
});

8. 内置指令 — 布尔属性

  -- ng-disabled

  -- ng-readonly

  -- ng-checked

  -- ng-selected

<textarea ng-disabled="isDisabled">Wait5seconds</textarea>
angular.module('myApp', [])
.run(function($rootScope, $timeout) {
$rootScope.isDisabled = true;
$timeout(function() {
$rootScope.isDisabled = false;
}, 5000);
});

9. 内置指令 — 类布尔属性

  -- ng-href

  -- ng-src

传统href,src：动态生成链接时，如果插值暂时未生效就会错误；ng-href,ng-src会等待插值生效后再执行。

10. 内置指令 — ng-app , ng-controller

  -- ng-app 和 ng-controller 是特殊的指令，因为它们会修改嵌套在它们内部的指令的作用域。
  -- ng-app 为AngularJS应用创建 $rootScope ， ng-controller 则会以 $rootScope 或另外一个ng-controller 的作用域为原型创建新的子作用域。

  -- 在JavaScript代码中通过 run 方法来访问 $rootScope 。

11.  $scope 对象的职责是承载DOM中指令所共享的操作和模型。

12. 操作指的是 $scope 上的标准JavaScript方法。

13. 模型指的是 $scope 上保存的包含瞬时状态数据的JavaScript对象。持久化状态的数据应该保存到服务中，服务的作用是处理模型的持久化。

14. 出于技术和架构方面的原因，绝对不要直接将控制器中的 $scope 赋值为值类型对象（字符串、布尔值或数字） 。DOM中应该始终通过点操作符 . 来访问数据。遵守这个规则将使你远离不可预期的麻烦。

15. 父级Controller嵌套子级Controller时，引用同一变量，父级中改变值会同时改变子级中的结果；相反，子级中改变值并不会改变父级中的结果。

16. JavaScript对象要么是值复制要么是引用复制。字符串、数字和布尔型变量是值复制。数组、对象和函数则是引用复制。如果将模型对象的某个属性设置为字符串， 它会通过引用进行共享， 因此在子 $scope 中修改属性也会修改父 $scope 中的这个属性。

<div ng-controller="SomeController">
{{ someModel.someValue }}
<button ng-click="someAction()">Communicate to child</button>
<div ng-controller="ChildController">
{{ someModel.someValue }}
<button ng-click="childAction()">Communicate to parent</button>
</div>
</div>

angular.module('myApp', [])
.controller('SomeController', function($scope) {
// 最佳实践，永远使用一个模式
$scope.someModel = {
someValue: 'hello computer'
}
$scope.someAction = function() {
$scope.someModel.someValue = 'hello human, from parent';
};
})
.controller('ChildController', function($scope) {
$scope.childAction = function() {
$scope.someModel.someValue = 'hello human, from child';
};
});

17. ng-switch

需要和 ng-switch-when & on="propertyName" 一起使用

<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>

18. ng-if

使用 ng-if 指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给 ng-if 的表达式的值是 false ，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。当一个元素被 ng-if 从DOM中移除， 同它关联的作用域也会被销毁。 而且当它重新加入DOM中时，会通过原型继承从它的父作用域生成一个新的作用域。

19. ng-repeat

遍历生成模板，附带一些附属属性。

  $index ：遍历的进度（0... length-1 ） 。
  $first ：当元素是遍历的第一个时值为 true 。
  $middle ：当元素处于第一个和最后元素之间时值为 true 。
  $last ：当元素是遍历的最后一个时值为 true 。
  $even ：当 $index 值是偶数时值为 true 。
  $odd ：当 $index 值是奇数时值为 true 

20. ng-init ??????

21. {{}} 与 ng-bind  在内部 $scope 和视图之间创建绑定。

HTML加载含有 {{ }} 语法的元素后并不会立刻渲染它们，导致未渲染内容闪烁,我可以用 ng-bind 将内容同元素绑定在一起避免.

22. 除了使用ng-bind避免{{}}闪烁，可以使用ng-cloak指令。

<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>

ng-cloak 指令会将内部元素隐藏，直到路由调用对应的页面时才显示出来。

23. ng-bind-template

同 ng-bind 指令类似， ng-bind-template 用来在视图中绑定多个表达式。

24. 我们应该始终用 ngModel 来绑定 $scope 上一个数据模型内的属性，而不是 $scope 上的属性。（使用点号）这可以避免在作用域或后代作用域中发生属性覆盖。

25. ng-show/ng-hide="boolean expression"