Question

我正在努力重构我现有的代码。我的控制器开始变得无法管理。我正在使用ui bootstrap。我找到了一个类似于我正在做的帖子How to close Angular UI Modal from anywhere

这是我正在连接数据库的工厂函数。我在模态控制器的成功中识别它

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>

Answer 1

所有内容实际上都适用于上面的代码。我有一些问题，nodemon没有为我做更新。除了上面发布的链接，我还通过Bossable从30天平均堆栈挑战中得到了一些想法。

重构角度bootstrap ui模态到工厂

1 个答案: