How to use a factory object within Angular JS view?

Question

I am new to angular js and am trying to build a simple grid with pagination. I have a factory object Entities which looks like this:

 //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++;
             }
         };
     }]);

And I want to use the Entities factory object in the ListCtrl's list.html view, e.g:

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>

I am not sure if this is possible. Please advise me how to come along this issue . I want to bind the pagination with the Entities object and all the pagination/sorting is done on the server-side so this object should remember the page no and sort order if we toggle b/w Edit and List view.

The server side script returns the number of records, no of pages and rows for the current page, e.g:

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

The other thing is to watch the values of pageNo, sortOrder and sortBy Entities attribute.

But I am unable to access it from view e.g <li ng-class="{disabled: Entities.pageNo == 0}"> without setting it to scope — sakhunzai
– sakhunzai, Commented Feb 19, 2014 at 8:23
What I meant to say is exactly this: you can't access it if you don't set it to the scope. — TestersGonnaTest
– TestersGonnaTest, Commented Feb 19, 2014 at 8:24
You are right, I think $scope attributes are only accessible in view — sakhunzai
– sakhunzai, Commented Feb 19, 2014 at 8:29

Setily · Accepted Answer · 2017-05-02 16:27:15Z

5

Please note that you're trying to get access to your factory from the HTML view.

This is impossible in AngularJS.

You have to bind entities to the $scope in your controller. And then you get access to the entities in your views through the $scope.

The $scope is the glue between controller and view in AngularJS. This pattern is close to MVVM in .NET technologies like Silverlight or WPF ...

Please read this part of the docs to really understand how AngularJS works inside !

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

Hope it helps !

edited May 2, 2017 at 16:27

Setily

8321 gold badge9 silver badges21 bronze badges

answered Feb 19, 2014 at 8:38

Thomas Pons

7,7293 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sakhunzai Over a year ago

How about watching the Entities.pageNo for changes e.g if pageNo is incremented it should load the respective page records

Collectives™ on Stack Overflow

How to use a factory object within Angular JS view?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related