如何在 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的列表.html视图中使用实体工厂对象，例如：

列表.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>

我不确定这是否可能。请告诉我如何处理这个问题。我想将分页与实体对象绑定，并且所有分页/排序都在服务器端完成，因此如果我们切换黑白编辑和列表视图，该对象应该记住页面编号和排序顺序。

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

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

另一件事是watch pageNo、sortOrder和sortBy实体属性的值。

Answer 1

请注意，您正在尝试从 HTML 视图访问您的工厂。

这在AngularJS中是不可能的。

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

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

请阅读文档的这一部分，以真正了解AngularJS内部的工作方式！

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

希望对您有所帮助！