如何在AngularJS modal中使用controllerAs语法?的方法

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

本文关键字：语法 controllerAs 方法 AngularJS modal      更新时间：2023-09-26

这是我的模态函数:

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

现在看起来还好。但是我仍然必须使用范围内的想法和nextstate变量。我怎么能使用那些也从vm?

如果您使用采用的模态视图使用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;在这个范围内。

好了，我把它做成这样:

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。我必须直接从scope中使用idea，因为我在我的主视图中有这样的东西:

ng-repeat="idea in vm.awesomeIdeas

. .我不能这样定义STH:

ng-repeat="vm.idea in vm.awesomeIdeas
相关文章：