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

Question

通常，我创建了一个使用 $scope 语法的控制器，因此，我可以将当前 $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 != controller

通过将 this 传递给 $modal.open()，您传递的是控制器的引用，而不是作用域。尝试传递 $scope。

Answer 2

您不能将其用作范围。它们是不同的。由于 $scope 是 AngularJS 的内部变量，因此您必须保持原样。

为了证明这一点，我创建了一个 Plunkr（打开控制台并查看它与 $scope 之间的区别）

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.$on...

所以，要在你的情况下做到这一点，只需传递 $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

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

Angular-ui modal: How to use the same controller?

javascript

angularjs