CODEWITHSUNDEEP
angularjsangularjs-directive
jsdev
jsdev

Reputation: 672

Multiple Controller As Syntax with One Directive?

I have Routes and Controllers like below

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl : '/data/user.html',
        controller : 'UserController as usr'
    })
    .when('/add-schema', {
        templateUrl : '/data/group.html',
        controller : 'GroupController as grp'
   })

}])

/*Note That I dont want to use $scope*/

.controller('UserController', function($http) {
    var vm = this;

    vm.total_rows = 90;
})
.controller('GroupController', function($http) {
    var vm = this;

    vm.total_rows = 60;
});

And I want to use only one pagination Directive for all pages , smth like this

.directive('datasPagination', function() {

  return {
      restrict: 'E',
      template: '<ul class="pagination"><li>{{total_rows}}</li></ul>'
  }

});

How to get the {{total_rows}} inside my Directive given that I use Controller As Syntax with different aliases and I dont use $scope ? . Above, I use "usr" and "grp" as Alias

Regards

Upvotes: 0

Views: 255

Answers (1)

Hitmands
Hitmands

Reputation: 14179

Try to isolate the directive scope, this is useful when you want to build a reusable component...

APP.directive('datasPagination', function() {

  return {
    restrict: 'E',
    scope: {
      rows: "="
    },
    template: '<ul class="pagination"><li>{{rows}}</li></ul>'
  }

});
<!-- where alias is the alias defined in controllerAs syntax -->
<data-pagination rows="alias.total_rows" />

further reading here

Upvotes: 2

Related Questions