2015-06-21 63 views
1

我正在重構我有的當前代碼。我的控制器開始變得難以管理。我正在使用ui bootstrap。我發現一個類似於我正在做的職位How to close Angular UI Modal from anywhere重構角度引導UI模式到工廠

這裏是我正在連接到我的數據庫的工廠函數。我確定它在模態控制器

function updateDrink(id,payload){ 
// need a payload for put and for post 
return $http.put('/api/drink/'+id,payload). 
    success(function(data){ 
    console.log(data); 
    return data; 
    }). 
    error(function(data){ 
    console.log('error'); 
    }); 

}

成功這是我原來的代碼。我把所有這些放在控制器裏面一切正常。我有模態工作,我正在獲取數據。

$scope.modalUpdate = function(size,selectedDrink) { 
console.log(selectedDrink); 

    var modalInstance = $modal.open({ 
    animation: $scope.animationsEnabled, 
    templateUrl: 'templates/editCaffeineDrink.html', 
    controller: function($scope,$modalInstance,drink,DrinkLibrary,Drink){ 
     $scope.drink = drink; 

     $scope.ok = function(id){ 
      DrinkLibrary.updateDrink(id,$scope.drink). 
      success(function(data){ 
      console.log(data); 
     }); 
      $modalInstance.close($scope.drink); 
    }; 

     $scope.cancel = function(){ 
     $modalInstance.dismiss('cancel'); 
     }; 
    }, 
    size: size, 
    resolve: { 
      // resolve the drink 
     drink: function() { 
       // return selected drink 
      return selectedDrink; 
     } 
    } 
}); 
    // end of mal instance/modal open 

modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 
}, function() { 
     $log.info('Modal dismissed at: ' + new Date()); 
    }); 
}; 

這是我的點擊處理我打電話的模式更新和我正確地與每一次點擊更新我的數據庫。

<a href="" ng-click="modalUpdate('lg',drink)"> 
    <i style="font-size:18px;" class="fa fa-pencil-square-o"></i> 
</a> 

這是我目前的工廠。我得到的模式下降,並顯示正確的數據。但是,我沒有更新我的信息。

app.factory('ModalService', ['$modal', '$modalStack',function($modal, $modalStack) { 
return { 
    trigger:function(selectedDrink){ 
    var modalInstance = $modal.open({ 
      templateUrl: 'templates/editCaffeineDrink.html', 
      controller: function($scope,$modalInstance,drink,DrinkLibrary,Drink){ 
      $scope.drink = drink; 
       $scope.ok = function(id){ 
       DrinkLibrary.updateDrink(id,$scope.drink). 
       success(function(data){ 
       console.log(data); 
       }); 
       $modalInstance.close($scope.drink);    }; 

       $scope.cancel = function(){ 
       $modalInstance.dismiss('cancel'); 
      }; 
      }, 
      size: 'lg', 
      resolve: { 
       // resolve the drink 

       drink: function() { 
       return selectedDrink; 
       } 
      } 
     }); 
     // end of modal open 
    } 
}; 
}]); 

在我的控制器,我調用工廠,並引發

$scope.update=ModalService.trigger; 

然後在我的點擊處理,我就點擊更新和傳遞對象。一切都在模態中顯示,但模態不更新。

<a href="" ng-click="update(drink)"> 
    <i style="font-size:22px;" class="fa fa-pencil-square-o"></i> 
</a> 

回答

0

上面的代碼實際工作。我有一些nodemon問題沒有爲我做更新。除了我上面發佈的鏈接外,我還通過Bossable獲得了30天平均堆棧挑戰的一些想法。