My directive is responsible for displaying a detail screen when a row is clicked. I am currently working on updating the encounter within this directive. Take a look at the code below:
angular.module('app').directive('chatContainer', function() {
return {
scope: {
encounter: '=',
count: '='
},
templateUrl: 'views/chat.container.html',
link: function(scope, elem) {
};
});
This is the template for the directive:
<div class="span4 chat-container">
<h5 class="chat-header">
<span class="container">{{encounter.patient.firstName }} {{encounter.patient.lastName}}</span>
</h5>
</div>
The following snippet shows where the directive is declared within the HTML:
<div chat-container encounter="selectedEncounter" count="count"></div>
Here is the controller that is triggered upon clicking a row.
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;
});
When I call the getSelectedRow() function, it successfully updates the selectedEncounter. However, the binding does not reflect this change in my chatContainer. Despite declaring the encounter with the scope type of =, it seems like something is missing. Can you point me in the right direction?