Angular入門2

Angular有5個大的組成部分：

　　1、控制器，2、路由，3、服務，4、篩選、5、指令

首先講服務：

　　服務要使用需要導入到控制器中。

自定義服務的方法：

jack.service("dataAllService",function($q,$http,$rootScope){

// 沒有封裝的 get 方法
//    $http.get("data/ml.json").success(function(respons){
//        $rootScope.dataAll = respons;
//    })
    
// 封裝後的 get 方法 
//   defer：延遲，resolve：決定，promise：承諾
    this.j_get = function (url,partarm){
        var deferred = $q.defer();
        $http.get(url + partarm + ".json").success(function(respons){
//            $rootScope.dataAll = respons;
            deferred.resolve(respons);
        }).error(function(respons){
            deferred.resolve(respons);
        })
        return deferred.promise;
    }

// 使用 get 方法
    this.j_get("data/ml","").then(function(data){
        $rootScope.dataAll = data;
    });
})


// 當然，封裝的目的是為了能在 控制器中使用
jack.controller("homeCtl",function($scope,$http,$stateParams,dataAllService){
// 獲取數據
    $scope.navList = ($stateParams.navList=="") ? 11 : $stateParams.navList;;
//    $http.get("data/ml/ml"+ $scope.navList +".json").success(function(respons){
//        $scope.data = respons;
//    })
    dataAllService.j_get("data/ml/ml",$scope.navList).then(function(response){
        $scope.data = response;
    })

然後是篩選器：

filter 放在 repeat上
  1. 可以在 ng-repeat="page in dataAll.lt| filter:search" 
      a. search 為 ng-model 中的值
jack.filter("jsc",function(){
    return function(input,param1,param2){
// data是當前迭代數組，index是當前序列號，arry是數組
// input 和 arry是一樣的。
        angular.forEach(input,function(data,index,arry){
            if(data.title == "綜合門戶"){
//                數組中移除元素
                arry.splice(index,1);
            }
        })
        return input;
    }
});

放在非 repeat的子元素上
  1. 在標簽中加入 <a ng-bind="page.title | jsc : '參數1' : '參數2'" ></a>
  2. 新建 filter 方法。要 return 2次
      a. input直接是當前迭代數組
jack.filter("jsc",function(){
    return function(input,param1,param2){        
        if(input =="綜合門戶"){
            input = param1+input+param2; 
        }
        return input;
    }
});

再是自定義指令

指令會經常發生不同步事件，
解決辦法：
  1. 如果有 repeat，那麼指令放到repeat上，然後用 scope.$last 判斷最後一個再執行
  2. 使用 scope.$watch（xx，function(){ }）
  3. 如果是 scope =xx 不和父類$scope同步，那麼用scope.$apply() 應用到控制器中去

指令參數，可以在不同的指令中調用不同的方法，
  1. 在標簽中 <div class="input-group wd-all" toggledisplay="pkq">
  2. 在控制器中 設定方法
 $scope.pkq = function(){
        $scope.left.tt = false;
        console.log("false")
    }
  ● 在指令中 應用方法 
  ● $(ele).children('input').on('focus',function(){
//                scope.left.tt = false;
//                scope.$apply();
                scope.$apply("pkq()");
            });

最後是路由：路由在上一章節已經講過，不再贅述。