2

I have looked at a number of other questions related to this such as

AngularJS : ng-repeat list is not updated when a model element is spliced from the model array

ng-repeat not updating on update of array

However I think that the way I built my app is sufficiently different that these aren't helping me.

I think my idea of doing this:

$rootScope.$on('connectionDispositionChanged',function(event, item){
    $scope.data.matches[item.index].info.disposition = item.disposition;
});

Isn't really working out the way I had hoped. I can actually see in the console that this updating, but it doesn't update in the table. Adding $scope.$apply() after this causes a digest in-progress error.

show.phtml

<div class="container-fluid" ng-app="analysisApp" ng-controller="analysisController">
            <table class="table table-condensed">
               <thead>
                    <tr >
                        <th ng-repeat="header in baseColumns" class="text-center">{{header.name | tableHeader}}</th>
                        <th ng-repeat="header in comparisonColumns" class="text-center text-info">{{header.name | tableHeader}}</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    <tr table-row data="data" ng-repeat="item in data.matches | filter:searchMatchText track by $index">
                </tbody>
            </table>
            <row class="col-md-12 text-center"><span class="text-muted">End of Data</span></row>
        </div><!-- #matches -->
</div>

tableRowDirective.js

"use strict";
analysisApp.directive("tableRow", function($compile) {

var getTemplate = function(scope, element, attrs){

    var base = scope.item.base;
    var comp = scope.item.comparison;
    var info = scope.item.info;

    // other non-relevant code...

    returnString += '<td class="text-center"><button class="btn btn-default btn-xs" ng-click="matchesSetDisposition(item, data.settings, $index)" >Set Disposition</button>';
    returnString += '</td>';
    return returnString;
    };

    var linker = function(scope, element, attrs){
      element.html(getTemplate(scope, element, attrs));
      $compile(element.contents())(scope);
    };
   return {
    restrict : "A",
    replace : true,
    link: linker
  };
});

analysisController.js

"use strict";
analysisApp.controller('analysisController', ['$scope','$rootScope','loadData','saveData','$uibModal', function ($scope,    $rootScope, loadData, saveData, $uibModal, $log) {


$rootScope.$on('connectionDispositionChanged',function(event, item){

   // $scope.data.matches[item.index].info.disposition = item.disposition;

});

$scope.matchesSetDisposition = function(item, scope, index){
    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: '/angular/analysis/templates/matches-modal.html',
      controller: 'matchesModalController',
      size: 'lg',
      resolve: {
        itemData: function () {
            return {
                dispositionLabels: $scope.dispositionLabels,
                disposition: item.info.disposition,
                connectionID: item.info.id,
                comparisonID: comparisonID,
                baseItemID: item.base.id,
                baseTitle: itemTitle(item.base),
                comparisonItemID: item.comparison.id,
                comparisonTitle: itemTitle(item.comparison),
                index: index
            }
        }
      }
    });


    modalInstance.result.then(function (item) { 
        $scope.data.matches[item.index].info.disposition = item.disposition;
        saveTheData('/analysis/apisaveconnectiondisposition', item);
    }, function () {

    });
  };
}]);

matchesModalController.js

"use strict";
analysisApp.controller('matchesModalController', function ($scope, $rootScope, $uibModalInstance, itemData, saveData) {
$scope.itemData = itemData;

$scope.ok = function (item) {
    $uibModalInstance.close(item);
};

$scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
};

$scope.delink = function (item) {
   BootstrapDialog.confirm({
        title: 'WARNING',
        message: '<p>Are you sure that you want to break the link between these items?</p>',
        type: BootstrapDialog.TYPE_DANGER,
        btnOKLabel: 'Break the link', 
        btnOKClass: 'btn-danger', 
        callback: function(result) {
            if(result) {
                $uibModalInstance.dismiss('delink');
                saveTheData('/analysis/apidelink', item);
            }else {
               // cancel the operation
            }
        }
    });
};

var saveTheData = function(url, item){
    saveData
        .postData(url, item)
        .then(function(dataResponse){
            $rootScope.$broadcast('connectionDispositionChanged', item);
        })
};
});
Community
  • 1
  • 1
Sports Racer
  • 457
  • 6
  • 13
  • Have you tried passing the item when you close the modal (`$uibModalInstance.close(item)`), and then calling the save function in your `analysisController` in a `modalInstance.result.then(function(item) { // do the saveTheData part here });` block? – Bennett Adams Jun 14 '16 at 15:19
  • Bennett - I added in the 'result.then' into the Analysis app, but it seems to only get called when I cancel the Modal. – Sports Racer Jun 14 '16 at 15:40
  • I see you updated the `modalInstance.result`... part (and looks like you're trying to log the item in the promise's failure function block, btw), but are you actually passing the item in the `$uibModalInstance.close(item);` statement? You have not updated that, if so. – Bennett Adams Jun 14 '16 at 16:28
  • Thanks for the help. I have updated the code again. `modalInstance.result.then` is good now, but this has broken something, I now get a `scope.item is undefined` error from the tableRowDirective, which I have also updated to include those lines. – Sports Racer Jun 14 '16 at 18:17
  • Are both `item.index` and `item.disposition` defined in the result function? It's hard to know exactly what's breaking because I cannot see how all the code fits together, and I know your situation isn't really conducive to reproducing in a plunkr. – Bennett Adams Jun 14 '16 at 18:42
  • I greatly appreciate the help! I know this isn't easy to follow and a plunkr would be great but I think it would be difficult to build. The row in the table actually has three other objects `item.info`, `item.base` and `item.comparision`. You can see this in the `tableRowDirective.js` file (this wasn't in my original post but I added it). When you click the button in the table row, the modal opens and the user can change the disposition. Except for refreshing the table info, this all appears to work as expected. – Sports Racer Jun 14 '16 at 20:01
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/114673/discussion-between-bennett-adams-and-sports-racer). – Bennett Adams Jun 14 '16 at 20:09

0 Answers0