Angular populate Bootstrap modal form from controller data

Question

I am trying to populate a modal form with data passed in from my controller. The data being displayed is always NULL, even though I have populated the data in the controller.

I have been trying to work this out and have tried a few different ways to do it but none work.

The examples I have seen use $scope, but I don't want to use $scope and instead use 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;
    });
})();

Any ideas?

Here is http://plnkr.co/edit/grHKGEJeKqoR8VHOW8I6?p=preview

score 3 · Accepted Answer · answered Oct 30 '15 at 13:01

First, use another name than vm for the modal. I've set it to vm2, also when defining the modal, you have to set the alias for the controller using the word as like this:

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

Check the link: http://plnkr.co/edit/JmCL6NjAmd2b1UPR8649

Angular populate Bootstrap modal form from controller data

1 Answers1