1

我是 Angular 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 视图中使用实体工厂对象，例如：

列表.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":[..]}

另一件事是,和Entity属性watch的值。pageNosortOrdersortBy

4

1 回答 1

5

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

这在 AngularJS 中是不可能的。

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

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

请阅读这部分文档以真正了解 AngularJS 在内部的工作原理！

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

希望能帮助到你 ！

于 2014-02-19T08:38:39.010 回答