Angularjs ui bootstrap modal sharing information to same controller

Question

I have the following modal set up in my cloud controller. I'm not giving this modal a specific controller to work off of because the goal is to share it with my cloud controller.

I don't tell the modal that it should be using the cloud controller because then the controller will get run twice, and I do not want this to happen.

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    $stateProvider
        .state('cloud', {
            url: '/cloud',
            controller: 'cloud',
            templateUrl: 'pages/templates/cloud.html'
        })
})

.controller('cloud', function($scope, $rootScope, $http, $state, $stateParams, $modal) {

    $scope.toggleModal = function () {
        $scope.renameModal = $modal.open({
            animation: true,
            templateUrl: 'pages/templates/modal.html',
            size: "md",
            scope: $scope
        });
    }

    $scope.submit = function(data) {
        console.log($scope.inputData, data);
    }

})

The issue I am trying to solve is with an input box in my modal template. I am trying to submit the text, have it be shared, and hopefully updated to one of my $scope variables inside the cloud controller.

Below you can see my modal.html where on submit, it runs the submit() function in my cloud controller. It run's successfully but the console log returns undefined for both $scope.inputData and data.

<div class="modal-header">
    <h3 class="modal-title">title</h3>
</div>
<div class="modal-body">
    <input type="text" id="rename_item" ng-modal="inputData" value="" />     
</div>
<div class="modal-footer">
    <button class="btn_submit fade" ng-click="submit(inputData)">Rename</button>
</div>

Could anyone help me figure out what I am doing wrong or how I can get this data over to my current cloud controller?

Shouldn't the input attribute be ng-model not ng-modal? — camden_kid
– camden_kid, Commented May 13, 2015 at 16:35
Also, you could just have: $scope.submit = function() {console.log($scope.inputData);} and ng-click="submit()" — camden_kid
– camden_kid, Commented May 13, 2015 at 16:38
@camden_kid Nice catch! but ng-model still brings undefined — bryan
– bryan, Commented May 13, 2015 at 16:52

bryan · Accepted Answer · 2015-05-13 17:00:50Z

1

A BIG shoutout to camden_kid for catching my mistake of misspelling ng-model. I accidentally did ng-modal.

Just correcting that spelling didn't fix it though.

I don't know why (maybe someone can help explain), but I had to use an object that was already created to get this to work. Just using a variable that was pre-defined didn't work.

So this is my change in my cloud controller:

.controller('cloud', function($scope, $rootScope, $http, $state, $stateParams, $modal) {

    $scope.toggleModal = function () {
        $scope.renameModal = $modal.open({
            animation: true,
            templateUrl: 'pages/templates/modal.html',
            size: "md",
            scope: $scope
        });
    }

    $scope.inputText = {data: ""};
    $scope.submit = function(data) {
        console.log($scope.inputText.data);
    }

})

And then I did the following to my html:

<input type="text" ng-modal="inputText.data" />

answered May 13, 2015 at 17:00

bryan

9,49918 gold badges94 silver badges180 bronze badges

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

1 Comment

jme11 Over a year ago

The reason is that the modal has an isolated scope. You have to use the close method, this will pass a promise that is resolved when a modal is closed. Check out the demo Plunker in the docs for the modal: angular-ui.github.io/bootstrap/#/modal

Collectives™ on Stack Overflow

Angularjs ui bootstrap modal sharing information to same controller

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related