在“同一控制器中的模态”方法的情况下，如何在 AngularJS 模态中使用 controllerAs 语法答案

【问题标题】：How to use controllerAs syntax with AngularJS modal in case of "modal in the same controller" approach在“同一控制器中的模态”方法的情况下，如何在 AngularJS 模态中使用 controllerAs 语法
【发布时间】：2016-01-16 00:23:17
【问题描述】：

这是我的模态函数：

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;
    ...

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

我试图将我的 vm 作为范围，但它不起作用。我该如何处理？

编辑：

我已将我的功能更改为：

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',

现在看来没问题。但我仍然必须使用作用域中的想法和下一个状态变量。我如何也可以使用来自 vm 的那些？

【问题讨论】：

stackoverflow.com/questions/33164281/…
这与我认为的不完全相同，因为我不想为模态使用单独的 ctrl

标签： javascript angularjs angularjs-controlleras

【解决方案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 作为控制器前缀的模式，那么只需在此范围内将这个vm 提供为$scope.vm = this;。

【讨论】：

它不起作用..这对我来说也有点奇怪，我已经将“this”分配给“var vm”..然后我在范围内创建另一个 vm 并再次分配“this”。

【解决方案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

【讨论】：