javascript - Run AngularJS directive on demand -


i'm attempting run directive after event, instance, click or model change. here how directive looks:

  .directive('enclose', function ($window, $http) {       return function (scope, elm, attrs) {           if (scope.$last) {               var url = getcurrentpath($window);               var rowid = scope.row.entity.id;               $http.get(url + '/' + rowid + '/attachment').success(function (data) {                   (data.length > 30) ? $(elm).removeattr('disabled') : $(elm).attr('disabled', 'disabled');               })           }   }; 

long story short: directive checks if row has file attached; if so, enables download button.

in table, data displayed, has lot of rows, , has pagination controls. so, issue raises when click on next page (f.e.), data displayed in table updated, directive doesn't. mean, directive not run again, updating enable/disable attributes each button.

i have 2 approachs: one, in controller have scope variable, currentpage, , after updated, call in way directive. way, i'm using angular ui-grid render data.

  $scope.regulationgrid = {           // ...           onregisterapi: function (gridapi) {               $scope.gridapi = gridapi;               $scope.currentpage = $scope.gridapi.pagination.getpage();               $scope.gridapi.pagination.on.paginationchanged($scope, function () {                   $scope.currentpage = $scope.gridapi.pagination.getpage();                   // here should directive call               });           }       }; 

two, use $watch function in directive, listen changes in $scope.currentpage variable. didn't achieve make work, directives run on load.

is there way run on demand directive? because directive working on load, no when scope changes.

thank in advance!

edit

enter image description here how looks problem. left table right: rows 3rd, 4th & 8th have files enclosed so, enables download button. right table renders wrong button because directive no longer running. right values rows 12th, 14th enabled.

so point is, how can check values after click on nextpage button?

as mentioned in comment, directives:

  • are not functions
  • cannot called
  • are static parts of website, unless use ng-if or ng-switch
  • should not perform business logic

it appears problem xy problem, let's start over. trying do?

from looks of it, want set directive disabled or enabled based on result of http call. instead of performing http call inside of directive, how pass directive variable isolation scope , alter variable parent controller? makes code less coupled , lets adhere best angular practises.

// usage: <enclose disabled="somescopevariable"></enclose> .directive('enclose', function() {   return {     scope: {       value: '=',       // 1 time binding supported natively in 1.3+.       maxlength: '::'     },     link: function ($scope, $elem, $attrs) {       var maxlength = parseint($scope.maxlength);       // purpose $scope.$last serve here?       if(!$scope.$last) return;       $scope.$watch('value', function(newvalue, oldvalue) {         if(newvalue === oldvalue) {           return;         }          if(oldvalue.length > maxlength) {           $elem.removeattribute('disabled');         } else {           $elem.setattribute('disabled', 'disabled');         }       });     }   } }) .controller('yourcontroller', function($scope, attachmentservice) {   $scope.regulationgrid = {     onregisterapi: function(gridapi) {       .....       $scope.gridapi.pagination.on.paginationchanged($scope, function() {         $scope.currentpage = $scope.gridapi.pagination.getpage();         // $http call moved external service.         attachmentservice.get($scope.row.entity.id)           .then(function(data) {             $scope.encloseddata = data;           });       });     }   };  }) .service('attachmentservice', function() {   this.get = function get(rowid) {     // why using getcurrentpath, way? seems hacky.     // alternative use /api , use http interceptor     // rewrite /api wherever base path is. either way,     // service shouldn't because of code duplication.     return $http.get('/api/' + rowid + '/attachment').then(function(response) {       return response.data;     });   }; }); 

then html might this:

<div ng-controller='yourcontroller'>   <enclose value="encloseddata" max-length="30">   </enclose> </div> 

Comments