AngularJS:ng-repeat表不会从UIB Modal更新

时间:2016-06-14 15:08:43

标签: javascript angularjs angularjs-scope

我已经查看过与此相关的其他一些问题,例如

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

但是我认为我构建应用程序的方式完全不同,这些并没有帮助我。

我想我这样做的想法:

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

实际上并没有按照我希望的方式运作。我实际上可以在控制台中看到此更新,但它不会在表中更新。在此之后添加$scope.$apply()会导致摘要进行中错误。

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

0 个答案:

没有答案