Justin Christian Justin Christian - 1 year ago 55
Javascript Question

Directive Update then run Query to Update Dom on Click

I've looked at more than 10 different directive questions and none have worked for me thus far. I'm trying to have my controller recognize

has changed which updates selectedChannel in my custom directive. The first time works great, but after that the ng-click does not change the view info. The
is registered and stored on my chatList controller, but the http requests are not called again.

If i click on a unit in site.html, the selectedChannel for the unit number changes in the chatList view, so I'm guessing the http requests are not being called again.

How do I add a listener to either the directive or my chatList controller so I can call the http requests again when selectedChannel changes?

Answer Source

Best I can tell from the code you've provided, you need to make a few changes


Add a definition for $scope.site otherwise site.selectedUnit will only be available in the context that it is defined in the HTML via ng-click.

$scope.site = {
  selectedUnit: null


Remove the isolate scope and inject the selectedChannel property via bindToController so that it will be accessible in the controller.

.directive('chatList', function() {
  return {
    restrict: 'E',
    bindToController: {
      selectedChannel: '='
    templateUrl: 'chatList.html',
    controller: 'ChatListController',
    controllerAs: 'chatList'


Watch for changes to selectedChannel.id to make your $http.get() call

vm.tenants = [];

$scope.$watch(angular.bind(vm.selectedChannel.id, function() {

   // make http.get call here

You have other issues as well that are too many to list so here's a working plunker