Angular: 遇到的一些坑

Angular应该很多人都已经很了解，谷歌的MVW开源项目。可能现在很多人开始鼓吹React了，但是它的成熟度还是没法和Angular比，Angular足够的强大去撑起很多项目。Angular已有丰富的教程和论坛社区。所以，现在使用的话，还是学一点Angular好。

angular-resource

现在越来越流行用Rest服务，还用SOAP确实有点out。所有后端数据都可以做成服务。angular的双向绑定连接的方法有很多，其中一种就是angular-resource。使用挺方便，当然也有一些坑。

具体操作看教程或者AngularJS Resource：与 RESTful API 交互，刚开始用起来很爽。三个文件如下：

app.js

 angular.module('moviesApp', [
        'moviesServices'
    ]);

movieController.js

angular
        .module('moviesApp')
        .controller('moviesController', moviesController);
 
    moviesController.$inject = ['$scope', 'Movies'];
 
    function moviesController($scope, Movies) {
        $scope.movies = Movies.query();
    }

movieService.js

 var moviesServices = angular.module('moviesServices', ['ngResource']);
 
    moviesServices.factory('Movies', ['$resource',
      function ($resource) {
          return $resource('/api/movies/', {}, {
              query: { method: 'GET', params: {}, isArray: true }
          });
      }]);

服务就是将API的数据查询出来，你也可以完成增删查改的动作。Controller调用一下就OK。

坑一：

想在js端获取某个$resource返回的数据，它与$http.get()不一样，数据有所封装。所以不好直接获取数据。参考从Angularjs-Resource获取数据一文，这时，需要做个Callback函数，将数据调出来。

$scope.profileslist = profilelist.query(function(response) {
    angular.forEach(response, function(item) {
        if (item.profileid) {
            $scope.items.push(item.profileid);
        }
    });
});

坑二：

当ng-repeat数据加载完成触发事件，参考ng-repeat加载完成事件一文，当然循环器中，需要标签my-repeat-directive，在加载完成后就会触发该事件。

angular.module('myApp', []).directive('myRepeatDirective', function() {
    return function(scope, element, attrs) {
        angular.element(element).css('color', 'blue');
        if (scope.$last) {
            window.alert("im the last!");
        }
    };
})

转载，请表明出处。总目录前端经验收集器