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变量。

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

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

    var vm = this;
    ...

现在我如何使这种模态函数适应这种新语法？对我来说面临的挑战是：我不止一次地重用模态窗口的视图，也在我的主视图上（没有模态）。这个观点已经适应了新的语法＆＃34; vm.data＆＃34;而不是＆＃34;数据＆＃34;。

我试图将我的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的那些？

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

如何在同一控制器中使用＆＃34;模式的AngularJS模态的controllerAs语法＆＃34;途径

2 个答案: