AngularJS: watch $ ne fonctionne pas dans le contrôleur avec ngTable

Question

j'ai écrit directive pop-up pour le filtre de la table:

var ngClass = "{ 'active': itemActive == item }"; 

    return { 
     template: '<span class="header_select_filter">' + 
     '<a class="icon icon-filter"></a>' + 
     '<div class="large select_popup">' + 
     '<h3></h3>' + 
     '<div class="content box">' + 
     '<ul class="items">' + 
     '<li ng-repeat="item in items" ng-class="' + ngClass + '" ng-click="select(item)"><span ng-bind="item.Name"><span></li>' + 
     '</ul>' + 
     '</div>' + 
     '</div>' + 
     '</span>', 
     replace: true, 
     transclude: true, 
     scope: { 
      items: '=', 
      itemActive: '=' 
     }, 
     restrict: 'E', 
     controller: function ($scope) { 
      $scope.select = function (item) { 
       $scope.itemActive = item; 
      } 
     }, 
     link: function ($scope, $element) { 
      var $popup = $element.find('.select_popup'); 
      $popup.css('top', '50px'); 
      $popup.find('.content.box').css('padding', '0'); 

      $element.find('a.icon.icon-filter:first')[0].onclick = function() { 
       $popup.toggle(); 
      }; 

      $element.find('ul.items')[0].onclick = function() { 
       $popup.fadeToggle('slow'); 
      } 

     } 
    }; 


}); 

Voilà comment je l'invoquons:

<select-popup items="filterItems" item-active="type"></select-popup> 

Et ce code est de la AngularJS de contrôleur, il y a j'ai essayé course watch $:

Invoice.types(function (data) { 
      var items = $scope.filterItems = data; 

      $scope.type = items[0]; 
     }); 

     $scope.$watch('type', function() { 

      console.log("type changes"); 
     }); 

Mais $ montre ('type') ne pas travailler, même si la valeur de mise à jour est ItemActive d en cliquant sur les éléments de popup.

La facture dans le contrôleur est un service basé sur $ resourse, i. e. Invoice.types est une requête ajax. Quand j'ai utilisé $ http, le problème persiste. Pouvez-vous m'aider?

EDIT: si je n'utilisé ajax:

var items = $scope.filterItems = [ 
     new FilterItem(1, 'Positive'), 
     new FilterItem(2, 'Negative'), 
     new FilterItem(3, 'Neutral') 
    ]; 

    $scope.type = items[0]; 

    var i = 1; 
    $scope.$watch('type', function() { 
     console.log('type changes:' + i); 
     i++; 
    }); 

Ensuite, il fonctionne.

JSFiddle with AJAX fonctionne aussi. Étrange pourquoi $ watch ne fonctionne pas pour moi.

MISE À JOUR: J'ai trouvé le problème. J'utilise ngTable et je mis ma directive dans la colonne de la table:

<table ng-table="tableItems"> 
    <thead> 
     <tr> 
      <td class="center text-center" rowspan="2"> 
      <span class="header-name">Name</span> 
      <select-popup items="filterItems" item-active="type"></select-popup>  </td> 
      <td class="center text-center" rowspan="2">Age</td> 
      <td class="center text-center" rowspan="2">Gender</td> 
     </tr> 
    </thead> 

Answer 1

Vous devez exécuter $ appliquer dans chacun de vos onclicks

$element.find('a.icon.icon-filter:first')[0].onclick = function() { 
    $popup.toggle(); 
    scope.$apply(); 
}; 

$element.find('ul.items')[0].onclick = function() { 
    $popup.fadeToggle('slow'); 
    scope.$apply(); 
} 

, je recommande fortement que vous aussi lire sur la façon utiliser angulaire, car vous ne devriez pas utiliser les fonctions onclick pour commencer.

Ajouter dans un $ s'appliquent aussi avec votre ajax.

Invoice.types(function (data) { 
     var items = $scope.filterItems = data; 

     $scope.type = items[0]; 
     $scope.$apply(); 
    });