angualrjs隨筆記之常用標籤
ng-app：定義大作用域
ng-controller：定義控制器範圍的作用域
得到app物件：
var app = angular.module('pyg',[]);
得到controoler物件：
app.controller('goodsController' ,function($scope,uploadService,goodsService){...}
得到service物件：
app.service('goodsService',function ($http) {...}
表示式：
{{}} : 可以是$scope中的變數、方法，也可以進行數學運算
controller中定義方法和屬性：
$scope.findAll=function(){}
$scope.name="zhangsan"
初始化：
<body ng-init="initFun()">...</body>
if標籤：
<span ng-if="temp==1">...</span>
迴圈標籤：
迴圈陣列：$scope.entity.goodsDesc.itemImages=[];
<tr ng-repeat="image in entity.goodsDesc.itemImages">
<td>{{$index}}迴圈的角標</td>
<td>{{image.color}}</td>
</tr>
迴圈Map：$scope.searchMap.spec={key1:value1,key2:value2...}
<li class="tag" ng-repeat="(key,value) in searchMap.spec"></li>
src標籤：
<img ng-src="xxx"/>
單擊事件：
<a href="#" ng-click="add()">xxx</a>
select的迴圈標籤：
$scope.itemCatList3=[]
<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCatList3"></select>
監聽事件：
//監聽$scope域中的entity.goods.category1Id的屬性變化
$scope.$watch('entity.goods.category1Id',function (newValue,oldValue) { ...});
angular支援的select2：
引入檔案：
<link rel="stylesheet" href="../plugins/select2/select2.css"/>
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css"/>
<script src="../plugins/angularjs/angular.min.js"></script>
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
<!--select2-model等價於ng-model；
$scope.typeList={data:[{id:xx,text:xx}]}-->
<input select2 select2-model="entity.typeId" config="typeList" placeholder="商品型別模板" class="form-control"/>
checkbox自身是否選中且設定選中的值ng-true-value：
<input type="checkbox" ng-true-value="1" ng-false-value="0" ng-click="updateSpecAttribute($event)">
$scope.updateSpecAttribute=function($event){
if($event.target.checked ){...}//true：選中
}
顯示包含html標籤的內容ng-bind-html：
/*$sce服務寫成過濾器*/
app.filter('trustHtml',['$sce',function($sce){
return function(data){
return $sce.trustAsHtml(data);
}
}]);
$scope.item.title="<span style='color:red'>哈哈</span>"
<em ng-bind-html="item.title | trustHtml"></em>
angular.js會把顯示的域內容只進行文字輸出，頁面不會對內容進行載入，顯示item.title時會呼叫trustHtml過濾器，使用$sce會修改angular的安全策略，對頁面內容讓瀏覽器載入
頁面接收引數$location標籤：
A頁面跳轉B頁面：
location.href="http://localhost:9105/search.html#?keywords="+$scope.keywords;
B頁面接收A頁面的引數keywords：
B頁面的controller需要傳入$location服務，search()就是獲取url後面?的引數內容['keywords']獲取keywords的key的值，但需要注意A跳轉B頁面的？前面必須加上一個#號，否則傳遞不過來
app.controller('searchController',function($scope,$location,searchService){
$scope.searchMap.keywords= $location.search()['keywords'];
}