CODEWITHSUNDEEP
javascriptangularjs
Sean
Sean

Reputation: 1888

Angular.js share controller methods

I am working on a CMS that I originally was using Knockout but I decided to try Angular because it like more of its functionality. In the CMS, one of the sections will be 'Users'. It has a table that allows the headers to be clicked to sort the data. The controller is below:

userControllers.controller('UserListControl', ['$scope', 'User',
    function($scope, User) {
        $scope.users = User.query();

        $scope.columns = [
            { 'field': 'last', 'label': 'Last Name' },
            { 'field': 'first', 'label': 'First Name' },
            { 'field': 'username', 'label': 'Username' },
            { 'field': 'email', 'label': 'Email' },
        ];
        $scope.orderProp = 'last';
        $scope.orderDirection = false;
        $scope.tableSort = function(field) {
            if ($scope.orderProp === field) {
                $scope.orderDirection = !$scope.orderDirection;
            }
            $scope.orderProp = field;
        };
        $scope.tableSortClass = function(field) {
            if ($scope.orderProp === field) {
                if ($scope.orderDirection) {
                    return 'sortDesc';
                }
                return 'sortAsc';
            }
        };
    }]);

It is part of my adminApp that I created. Since there will be other sections that will also use the table sort properties (orderProp, orderDirection) and methods (tableSort, tableSortClass), is there a place I can put these methods so my eventual recordsController will also have access to them?

OK, so I am trying to create it using a service and factory function. This is all new to me so I am not completely sure what I am doing but here is what I have:

adminServices.factory('TableSort', [
    function() {
        var orderProp = 'id';
        var orderDirection = false;

        function sort(field) {
            alert('test');
            if (orderProp === field) {
                orderDirection = !orderDirection;
            }
            orderProp = field;
        }

        function sortClass(field) {
            if (orderProp === field) {
                if (orderDirection) {
                    return 'sortDesc';
                }
                return 'sortAsc';
            }
        }
    }]);

I was hoping to access them in my html using something like ng-click="TableSort.sort(field)" but it doesn't work as it is right now.

Upvotes: 1

Views: 93

Answers (3)

Unome
Unome

Reputation: 6900

As stated above in the other posts, you can create a service that you can inject into various controllers to "share" the code.

Below is a full example:

myApp.service('myService', function myService() {
    return {
        someVar: "Value",
        augmentName: function(name){
            return "Sir " + name;
        }
    }
});

This first piece is the service. I've defined a "myService" and given it one function "augmentName" Now you can inject the myService and access the augment name function.

myApp.controller('testCtrl', function ($scope, myService) {

    $scope.testFunction = function(name){
      console.log(myFunction.someVar); //This will access the service created variable
      return myService.augmentName(name);
    }
}

The controller injects the service and then calls it within one of its functions.

Now your HTML code should have access to the controller if you have defined an ng-controller with "testCtrl" or if you have put testCtrl as the controller in your router.

You can now call ng-model="testFunction(someName)" and it will resolve as expected.

Hope that helps. Let me know if you want me to go into greater depth

If you are still trying to figure out how everything in angular works, the angular phone cat tutorial helped me allot when I started out. I'd recommend donating an hour or so into playing with it.

Also, I highly recommend experimenting as early as possible with yeoman/angular generator, this will force you to use angular "the angular way" and can really help you with getting your project set up correctly.

Upvotes: 1

V31
V31

Reputation: 7666

You can create a service and put all those properties and method in it. Here is an example for the same:

userControllers.service('UserListControl', function() {
    var orderProp = 'last';
    var orderDirection = false;
    return {
       tableSort : function(field) {
        if (orderProp === field) {
            orderDirection = !orderDirection;
        }
        orderProp = field;
    };
      tableSortClass: function(field) {
        if (orderProp === field) {
            if (orderDirection) {
                return 'sortDesc';
            }
            return 'sortAsc';
        }
    };
   }
});

Upvotes: 1

ABucin
ABucin

Reputation: 956

You can use a Service or a Factory to hold these common methods. Additionally, you could use the $rootScope.

Upvotes: 1

Related Questions