Angular-ui modal：如何使用相同的控制器？

Question

通常，我創建了一個控制器，其使用$scope語法，所以，我可以通過現有的$範圍的模態指令的一個隔離的範圍如下：

$scope.openEditModal = function() { 
    $scope.modalInstance = $modal.open({ 
     templateUrl: 'views/budgets/mainbudgets/edit', 
     scope: $scope // Passing a $scope variable 
    }); 

    $scope.modalInstance.close(); 
}; 

然而，我剛切換控制器使用this語法：

var self = this; 
// User edit modal 
this.openEditModal = function() { 
    self.modalInstance = $modal.open({ 
     templateUrl: 'views/budgets/mainbudgets/edit', 
     scope: self; // This doesn't work 
    }); 

    self.modalInstance.close(); 
}; 

所以，我怎麼能流過電流this在模態指令隔離範圍內使用？

編輯

這裏是我的控制器的整個代碼：

angular.module('sms.budgets').controller('BudgetsMainController', ['$scope', 'Global', '$modal', '$timeout', '$rootScope','Budgets', function($scope, Global, $modal, $timeout, $rootScope,Budgets) { 
    var self = this; 
    this.newBudget = {}; 
    this.budgets = []; 

    function init() { 
     var data = {}; 

     // Load main budget from DB 
     Budgets.load('main-budgets').success(function(budgets) { 
      self.budgets = budgets || []; 
     }); 
    } 
    init(); 

    /** 
    * Create a new main budget 
    */ 
    this.create = function() { 
     var data = {}; 
     data.budget = self.newBudget; 
     data.dbName = 'Budget'; 
     Budgets.create('budgets', data).success(function() { 
      self.isSuccess = true; 
      $timeout(function() { 
       self.isSuccess = false; 
      }, 5000); 
     }).error(function(err) { 
      self.isError = true; 
      $timeout(function() { 
       self.isError = false; 
      }, 5000); 
     }); 
    }; 

    this.edit = function() { 
     self.modalInstance.close(); 
    }; 

    // User edit modal 
    this.openEditModal = function() { 
     var newScope = $rootScope.$new(); 
     newScope.modalInstance = self.modalInstance; 
     newScope.edit = self.edit; 
     self.modalInstance = $modal.open({ 
      templateUrl: 'views/budgets/mainbudgets/edit', 
      scope: newScope 

     }); 

     self.modalInstance.close(); 
    }; 

    this.cancelEditModal = function() { 
     self.modalInstance.dismiss('cancel'); 
    }; 

}]); 

Answer 1

您不能將其用作範圍。他們是不同的。由於$ scope是AngularJS的內部變量，因此您必須保留它。

要說明的是，我創建了一個Plunkr（打開控制檯，並看到這一點，$範圍之間的diffence）

http://plnkr.co/edit/DkWQk4?p=preview

反正就是用在不同的範圍一個很好的做法模態控制器。在這裏你展示如何將主控制器和模態控制器之間通信的示例：

從MainCtrl：

var modalInstance = $modal.open({ 
    templateUrl: 'views/parts/modalUrlImg.html', 
    controller: 'ModalUrlCtrl', 
    resolve: { 
    url: function() { // pass the url to the modal controller 
     return $scope.imageUrl; 
    } 
    } 
}); 

// when the modal is closed, get the url param 
modalInstance.result.then(function (url) { 
    $scope.courses[i].imageUrl = url; 
}); 

從莫代爾按Ctrl：

.controller('ModalUrlCtrl', function($scope, $modalInstance, url) { 

    $scope.url = url; // get the url from the params 

    $scope.Save = function() { 
    $modalInstance.close($scope.url); 
    }; 

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

    $scope.Clean = function() { 
    $scope.url = ''; 
    }; 
}); 

希望這幫助你，歡呼。

---編輯---

你可以保持控制器的語法。事實上，你必須混合兩種語法，因爲你只能用這個來增加變量和函數，但不能訪問其他範圍的東西，比如$ scope。$ ...

所以，要在你的情況下，只是通過$範圍：

var self = this; 
// User edit modal 
this.openEditModal = function() { 
    self.modalInstance = $modal.open({ 
     templateUrl: 'views/budgets/mainbudgets/edit', 
     scope: $scope; 
    }); 

    self.modalInstance.close(); 
}; 

我試過在更新plunkr和它的工作現在：

http://plnkr.co/edit/DkWQk4?p=preview

Answer 2

$scope != controller

通過傳遞this到$modal.open()您傳遞控制器的參考，而不是規模。改爲嘗試傳遞$scope。