Angularjs使用中的一些注意事項

1、HTML段的根元素不唯一

myModule.directive('myDirective', function factory() {
return {
  ...
  replace: true,
  templateUrl: 'someUrl'
  ...
}
});

在templateUrl屬性中指定的的someUrl頁面必須具有唯一根元素，如下：

<div><b>Hello</b> World!</div>

如下是一個非法的例子:

<b>Hello</b> World!

最需要注意的就是如下的代碼段:

<div class='container'>
<div class='wrapper>
   ...
</div> <!-- wrapper -->
</div> <!-- container -->

註釋 <!-- container --> 也會被當成第二個根節點的，所以如上也是一個非法的代碼段.

2、表單的驗證提示不管用（僅代表個人看法）

 <input type="text" class="form-control" placeholder="text" name="mtext"
                                       ng-required="true" ng-minlength="2"  ng-maxlength="15"
                                       ng-model="businessManager.newPageUrlAdapter.loginname" />

可能會出現如下問題：

（1）沒有寫ng-required="true"，導致不對最小和最大長度進行檢查

（2）type="text" 屬性寫到了後面

3、使用setTimeout()改變屬性值時不起作用

代碼段如下：

<p class="status-message" ng-show="message">{{ message }}</p>

$scope.message = 'Changes saved!';
setTimout(function() {
  $scope.message = null;
}, 5 * 1000);

對message值進行更新，但是不起作用。原因就是這個函數不對髒數據進行檢查，所以還需要調用$scope.$apply() 。而使用angularjs提供的$timeout時，則不用進行髒檢查，因爲這個函數內部已經調用過$apply方法了，正確的用法如下：

function MyController($scope, $timeout) {
  ...
  $scope.message = 'Changes saved!'; 
  $timeout(function() {
    $scope.message = null;
  }, 5 * 1000);
}

4、js、angularjs是預編譯執行而不是順序執行

var url = 'ssp/apply/'+$scope.curuser.id+'?crmbaseinfoid='+ $scope.region;
$scope.submit = function(){
    var type = 1;
    // 使用restangular發送一個url請求，相當於$http發送請求
    restangular.all(url).post().then(function(data){

    });
}

如上代碼段有可能造成$scope.region、$scope.curuser.id爲undefined。因爲JS是先前編譯的代碼，所以如果將url寫入外部，則先前已經編譯好了，正確的寫法如下：

$scope.submit = function(){
			var type = 1;
			restangular.all('ssp/apply/'+$scope.curuser.id+'?crmbaseinfoid='+ $scope.region).post().then(function(data){

			});
}

5、整數與字符串

 <input choose type="radio" ng-model="rule.num" name="choose" value=1 />

如上的寫法value爲1，而如果寫成value="1"，則類型爲字符串

6、代碼報錯：[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq

<div ng-init="words = ['高校','高校','高校']" ng-repeat="word in words">
    {{word}}
</div>

[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys

  發現是因爲相同的內容重複引起，解決方案

<div ng-init="words = ['高校','高校','高校']" ng-repeat="word in words track by $index">
    {{word}}
</div>