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

namelivia · Accepted Answer · 2015-10-30 13:01:16Z

3

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

answered Oct 30, 2015 at 13:01

namelivia

2,7351 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular populate Bootstrap modal form from controller data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related