Justin Christian Justin Christian - 4 months ago 11
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

site.selectedUnit
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
selectedChannel
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

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

site.controller

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
};

chatList.directive

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'
  };
})

chatList.controller

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

Comments