Angular 从控制器数据中填充 Bootstrap 模态表单答案

【问题标题】：Angular populate Bootstrap modal form from controller dataAngular 从控制器数据中填充 Bootstrap 模态表单
【发布时间】：2015-10-30 12:49:43
【问题描述】：

我正在尝试使用从我的控制器传入的数据填充模式表单。显示的数据始终为NULL，即使我已经在控制器中填充了数据。

我一直在努力解决这个问题，并尝试了几种不同的方法，但都没有奏效。

我看到的例子使用$scope，但我不想使用$scope，而是使用controller as

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);

(function () {
    'use strict';

    angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function($uibModal, $log) {

      var vm = this;

        vm.vehicle = [{
            vehicleRegistration: null,
            createUser: null
        }];

        vm.open = function (size) {
            vm.vehicle[0]["vehicleRegistration"] = 'ABCDEFG';
            vm.vehicle[0]["createUser"] = 'BOBF';

            var modalInstance = $uibModal.open({
                templateUrl: 'myModalContent.html',
                controller: 'ModalInstanceCtrl',
                size: 'lg',
                resolve: {
                    items: function () {
                        return vm.vehicle;
                    }
                }
            });
        };
    });
})();


(function () {
    'use strict';

    angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($uibModalInstance, items) {
        var vm = this;
        // I want to get the vehicle data pass to populate the form myModalContent.html
        vm.vehicle = items;
    });
})();

有什么想法吗？

这里是http://plnkr.co/edit/grHKGEJeKqoR8VHOW8I6?p=preview

【问题讨论】：

标签： angularjs angularjs-scope

【解决方案1】：

首先，使用 vm 以外的其他名称作为模态。我已将其设置为 vm2，同样在定义模态时，您必须使用 as 一词为控制器设置别名，如下所示：

  var modalInstance = $uibModal.open({
  templateUrl: 'myModalContent.html',
  controller: 'ModalInstanceCtrl as vm2',
  size: 'lg',
  resolve: {
    items: function () {
      return vm.vehicle;
    }
  }
});

查看链接：http://plnkr.co/edit/JmCL6NjAmd2b1UPR8649

【讨论】：