My controller is not updating my directive - Angular

Question

I have a directive that shows a detail screen when a row is clicked. I am trying to get the encounter to update. Here is the directive:

angular.module('app').directive('chatContainer', function() {
  return {
    scope: {
      encounter: '=',
      count: '='
    },
    templateUrl: 'views/chat.container.html',
    link: function(scope, elem) {
  };
});

Here is the template to the directive:

<div class="span4 chat-container">
 <h5 class="chat-header">
  <span class="container">{{encounter.patient.firstName }} {{encounter.patient.lastName}}</span>
  </h5>
</div>

Here is where the directive is declared in the html:

<div chat-container encounter="selectedEncounter" count="count"></div>

And here is the controller that is called when the row is clicked.

angular.module('app').controller('EncounterCtrl', function ($scope, singleEncounter) {

  $scope.count = 500;

  $scope.selectedIndex = -1;

  $scope.selectedEncounter = -1;

  $scope.getSelectedRow = function($index) {
    $scope.selectedIndex = $index;
    $scope.selectedEncounter = $scope.encounters[$scope.selectedIndex];
  };

  $scope.encounter = singleEncounter.selectedEncounter;
});

I get into the function getSelectedRow() and it changes the selectedEncounter to the correct encounter. The binding does not bring the selection across to my chatContainer . I thought when I declared the encounter in the directive scope and gave it = as the scope type, it bound it, but I am missing something???

Answer 1

您需要$apply()进行更改，但是用于操作值的逻辑应该在chatContainer指令内，而不是在控制器内。