Angular directive scope variable undefined

Question

I am trying to access my scope variables in link but they appear undefined

/** @ngInject */
function tablePagination() {
  return {
    restrict: 'E',
    template: require('./tablePagination.html'),
    scope: {
      currentPage: '=',
      totalPages: '=',
      totalCount: '=',
      perPage: '='
    },
    link: function (scope) {
      console.log(scope.currentPage, scope) // scope.currentPage is undefined
    }
  }
}

// controller for authlogin
module.exports = tablePagination

I also tried using @ rather than = and changed the binding to using {{}} but its still undefined. I could use $observe but I want to get values for multiple attributes at once to do some computation. Whats the best way to do this?

HTML Code

 <table-pagination
    current-page="$ctrl.tableMeta.currentPage"
    total-count="$ctrl.tableMeta.totalCount"
    total-pages="$ctrl.tableMeta.totalPages"
    per-page="$ctrl.tableMeta.perPage"></table-pagination>

UPDATE: I wonder if its because the directive is not getting updated values from $ctrl.tableMeta which is coming from API/Async

SOLUTION!: Oh I discovered my mistake was I need to use $watch otherwise it gets the old value which is by default undefined, since its not set async by API yet

scope.$watch('currentPage', () => {
  scope.start = (scope.currentPage - 1) * scope.perPage + 1
  scope.end = Math.min(scope.currentPage * scope.perPage, scope.totalCount)
})

provide your html when you used your directive.

Curiousdev
– Curiousdev

2016-12-23 09:09:19 +00:00
Commented Dec 23, 2016 at 9:09 — Curiousdev
– Curiousdev, Commented Dec 23, 2016 at 9:09
currentPage Needs to be passed from the HTML!

Dhaval Marthak
– Dhaval Marthak

2016-12-23 09:09:55 +00:00
Commented Dec 23, 2016 at 9:09 — Dhaval Marthak
– Dhaval Marthak, Commented Dec 23, 2016 at 9:09
can you share your tablePagination.html?

Suresh B
– Suresh B

2016-12-23 09:26:15 +00:00
Commented Dec 23, 2016 at 9:26 — Suresh B
– Suresh B, Commented Dec 23, 2016 at 9:26
@Curiousdev, added HTML

Jiew Meng
– Jiew Meng

2016-12-23 13:37:21 +00:00
Commented Dec 23, 2016 at 13:37 — Jiew Meng
– Jiew Meng, Commented Dec 23, 2016 at 13:37
@SureshB added HTML

Jiew Meng
– Jiew Meng

2016-12-23 13:37:28 +00:00
Commented Dec 23, 2016 at 13:37 — Jiew Meng
– Jiew Meng, Commented Dec 23, 2016 at 13:37

MMK · Accepted Answer · 2016-12-23 10:15:23Z

1

Its just an example i hope it will clear few things up.

gridPagination.html

<label>current Page:</label><span>{{ currentPage }}</span>
<br>
<label>Total Pages:</label> {{ totalPages }}

app.js

var app = angular.module("myApp", []);

mainController.js

app.controller('mainController', ['$scope', function($scope) {
  $scope.title = 'My Grid';
}]);

gridDirective.js

app.directive('grid', gridPagination);

function gridPagination() {
  return {
    restrict: 'E',
    scope: {
      currentPage: '=',
      totalPages: '=',
      totalCount: '=',
      perPage: '='
    },
    templateUrl: 'gridPagination.html',
    link: function(scope, element, attrs) {
      console.log(scope.currentPage);
      console.log(scope.totalPages);
      console.log(scope.totalCount);
      console.log(scope.perPage);
    }
  };
};

index.html

<html>
  <head>
    <link rel="stylesheet" href="main.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
  </head>   
  <body ng-app="myApp">
    <div ng-controller="mainController">
        <grid current-page="3" total-pages= "30" total-count="10" per-page="2"></grid>
    </div>        
    <script src="app.js"></script>
    <script src="mainController.js"></script>
    <script src="gridDirective.js"></script>
  </body>    
</html>

plunker

edited Dec 23, 2016 at 10:15

answered Dec 23, 2016 at 10:08

MMK

3,7311 gold badge26 silver badges30 bronze badges

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

3 Comments

Jiew Meng Over a year ago

I find that this works, but once I use a dynamic attribute current-page=$ctrl.tableMeta.currentPage for example, it breaks. I think the directive is not getting the value of currentPage when its set by API?

Jiew Meng Over a year ago

Ok I discovered I need to use $watch

MMK Over a year ago

Great @JiewMeng

Collectives™ on Stack Overflow

Angular directive scope variable undefined

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related