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

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 实体属性的值{{1}}。

Answer 1

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

这在AngularJS中是不可能的。

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

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

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

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

希望它有所帮助！

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

1 个答案: