如何在Angular JS视图中使用工厂对象？

Question

我是角度js的新手,我正在尝试用分页构建一个简单的网格.我有一个工厂对象Entities,如下所示:

 //app module
 angular.module('project',['ngRoute','controllers', 'services'])
     .config(['$routeProvider', function($routeProvider){
         $routeProvider
             .when('/',{
                 controller:'ListCtrl',
                 templateUrl:'list.html'
             })
             .when('/edit/:id',{
                 controller:'EditCtrl',
                 templateUrl:'form.html'
             })
             .otherwise({
                 redirectTo:'/'
             })
     }]);

//controller
 angular.module('controllers',[])
     .controller('ListCtrl',['$scope','Entities',function($scope ,Entities){
         Entities.get(function(data){
             $scope.entityCaption='Projects';
             $scope.entities=data;

         });          
       }])

// services module
 angular.module('services', [])
     .value('dataConfigs',
            {
                fetchUrl:'../fetch.php',
                saveUrl:'../save.php',
                entityName:'projects'
            }
       )
     .factory('Entities', ['$http','$filter','dataConfigs', function($http,$filter,dataConfigs){
         return{
             pageNo:1,
             rows:2,
             sortBy:'id',
             sortOrder:'desc',
             get: function(callback){
                 $http({
                     url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&page='+this.pageNo+'&rows='+this.rows+'&sidx='+this.sortBy+'&sord='+this.sortOrder+'&format=assoc',
                     method: "POST"
                  }).success(function (data) {
                      callback(data);
                  });
             },
             getById:function(id,callback){
                 $http({
                     url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&where_id='+id+'&page=1&rows=1&sidx=id&sord=asc&format=assoc',
                     method: "POST"
                 }).success(function (data) {
                         if(data.records==1)
                             callback(data.rows[0]);
                         else
                             callback({});
                 });
             },
             prevPage:function(){
                this.pageNo--;
             },
             setPage:function(){
                //set pageNo to N
             },
             nextPage:function(){
                 this.pageNo++;
             }
         };
     }]);

我想在ListCtrl的list.html视图中使用Entities工厂对象,例如:

list.html

<div class="pagination pull-right">
        <ul>
            <li ng-class="{disabled: Entities.pageNo == 0}">
                <a href ng-click="Entities.prevPage();prePage()">« Prev</a>
            </li>
            <li ng-repeat="n in range(entities.total)" ng-class="{active: n == Entities.pageNo}" ng-click="Entities.setPage()">
                <a href ng-bind="n + 1">1</a>
            </li>
            <li ng-class="{disabled: Entities.pageNo == entities.total - 1}">
                <a href ng-click="Entities.nextPage()">Next »</a>
            </li>
        </ul>
    </div>

我不确定这是否可行.请告诉我如何解决这个问题.我想将分页与Entities对象绑定,并且所有分页/排序都在服务器端完成,因此如果我们切换b/w编辑和列表视图,此对象应该记住页面号和排序顺序.

服务器端脚本返回当前页面的记录数,页数和行数,例如:

{"page":"1","total":4,"records":"8","rows":[..]}

另一件事是watch和pageNo,sortOrder和sortBy Entities属性的值.

Answer 1

请注意,您正在尝试从HTML视图访问工厂.

这在AngularJS中是不可能的.

您必须将实体绑定到控制器中的$ scope.然后,您可以通过$ scope访问视图中的实体.

$ scope是AngularJS中控制器和视图之间的粘合剂.这种模式接近于Silverlight或WPF等.NET技术中的MVVM ......

请阅读这部分文档,以真正了解AngularJS如何在其中工作!

http://docs.angularjs.org/guide/concepts

希望能帮助到你 !