Angular从控制器数据填充Bootstrap模态形式

时间:2015-10-30 12:49:43

标签: angularjs angularjs-scope

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

我一直在努力解决这个问题,尝试了几种不同的方法,但没有办法。

我见过的示例使用$ scope,但我不想使用$ scope而是使用controller作为

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

1 个答案:

答案 0 :(得分:3)

首先,为模态使用除vm之外的其他名称。我已将其设置为vm2,同样在定义模态时,您必须使用这样的单词设置控制器的别名:

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

检查链接:http://plnkr.co/edit/JmCL6NjAmd2b1UPR8649