在 "modal in the same controller" 方法的情况下，如何将 controllerAs 语法与 AngularJS 模态一起使用

Question

这是我的模态函数：

vm.openUpdateStateModal = function (nextState, idea) {
  $scope.nextState = nextState;
  $scope.idea = idea;
  $scope.modalWindowOpen = true;

  $scope.modalInstance = $modal.open({
    templateUrl: 'updateStateModal',
    windowClass: 'updateStateModal',
    scope: $scope
  });

  $scope.modalInstance.result.then(function () {
    $scope.updateState(nextState, idea);
  });

  $scope.modalInstance.result.finally(function () {
    $scope.modalWindowOpen = false;
  });
};

我不想为我的模态添加另一个控制器，这就是为什么我只是将 $scope 作为参数，而不是单独映射参数。所以在视图方面，我可以使用所有 $scope 变量。

昨天我将控制器更新为 controllerAs 语法如下：

angular.module('app')
  .controller('IdeaCtrl', function ($scope, ...) {

    var vm = this;
    ...

现在我怎样才能使这个模态函数适应这个新语法？我面临的挑战是：我不止一次重复使用模态 window 的视图，也在我的主视图（没有模态）上。而且这个视图已经适应了新语法 "vm.data" 而不是 "data"。

我试图将我的虚拟机作为作用域，但没有成功。我该如何处理？

编辑：

我已经将我的功能更改为：

vm.openUpdateStateModal = function (nextState, idea) {
  $scope.nextState = nextState;
  $scope.idea = idea;
  $scope.modalWindowOpen = true;

  $scope.modalInstance = $modal.open({
    templateUrl: 'updateStateModal',
    windowClass: 'updateStateModal',
    controller: 'IdeaCtrl as vm',
    scope: $scope
  });

  $scope.modalInstance.result.then(function () {
    $scope.updateState(nextState, idea);
  });

  $scope.modalInstance.result.finally(function () {
    $scope.modalWindowOpen = false;
  });
};

所以我添加了这一行：

controller: 'IdeaCtrl as vm',

现在看来可以了。但我仍然必须使用作用域中的 idea 和 nextstate 变量。我怎样才能同时使用 vm 中的那些？

Answer 1

如果您使用采用的模态视图来使用 vm 作为控制器引用的前缀，那么您传递给模态模板的范围应该有 vm 属性。然后你所要做的就是确保你设置这个 vm 属性:

$scope.vm = this;

$scope.openUpdateStateModal = function(nextState, idea) {
    $scope.nextState = nextState;
    $scope.idea = idea;
    $scope.modalWindowOpen = true;

    $scope.modalInstance = $modal.open({
        templateUrl: 'updateStateModal',
        windowClass: 'updateStateModal',
        scope: $scope
    });

    $scope.modalInstance.result.then(function() {
        $scope.updateState(nextState, idea);
    });

    $scope.modalInstance.result.finally(function() {
        $scope.modalWindowOpen = false;
    });
};

因此，如果您知道要打开一个使用 vm 作为 controllerAs 前缀的模式，那么只需在此范围内提供此 vm 作为 $scope.vm = this;。

Answer 2

好的，我已经做到了：

vm.openUpdateStateModal = function (nextState, idea) {
  vm.modalWindowOpen = true;
  vm.nextState = nextState;
  $scope.idea = idea;

  vm.modalInstance = $modal.open({
    templateUrl: 'updateStateModal',
    windowClass: 'updateStateModal',
    scope: $scope
  });

  vm.modalInstance.result.then(function () {
    vm.updateState(nextState, idea);
  });

  vm.modalInstance.result.finally(function () {
    vm.modalWindowOpen = false;
  });
};

在视图方面，我使用范围内的想法，以及 vm 中的其他变量。我必须直接从范围使用想法，因为我的主视图上有这样的东西：

ng-repeat="idea in vm.awesomeIdeas

..我不能这样定义某物：

ng-repeat="vm.idea in vm.awesomeIdeas

在 "modal in the same controller" 方法的情况下，如何将 controllerAs 语法与 AngularJS 模态一起使用

How to use controllerAs syntax with AngularJS modal in case of "modal in the same controller" approach

javascript

angularjs

angularjs-controlleras