ng-model input inside an angular-ui modal controller is undefined

Question

In my modal template I'm trying to use ng-model to assign a value to the scope of my controller ($scope.name), but it doesn't work. It gives me undefined. What am I doing wrong? Plunker here

I expect that the modal creates its own scope, and puts name into that scope because I used ng-model. It seems to be active inside the modal controller as I can output it fine using {{name}}

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-body">
            Name: <input type="text" ng-model="name">
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
        </div>
    </script>
    <button class="btn" ng-click="open()">Open me!</button>
</div>

Javascript:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {    
  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl
    });
  };      
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {    
  $scope.ok = function () {
    $modalInstance.close($scope.name);
    alert('name was: ' + $scope.name)
  };    
  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };      
};

You have missed the closed tag in the input field

Ramesh Rajendran
– Ramesh Rajendran

2014-03-04 12:56:43 +00:00
Commented Mar 4, 2014 at 12:56 — Ramesh Rajendran
– Ramesh Rajendran, Commented Mar 4, 2014 at 12:56

AlwaysALearner · Accepted Answer · 2014-03-04 12:57:49Z

22

The model name is created inside a different scope. Use an object:

var ModalInstanceCtrl = function ($scope, $modalInstance) {
    $scope.data = {
        name:""
    };
    $scope.ok = function () {
        alert('name was: ' + $scope.data.name);
        $modalInstance.close($scope.data.name);
    };

Plunk

answered Mar 4, 2014 at 12:57

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

2 Comments

Nick Over a year ago

Thanks, can you explain why it works for an object and not for a normal variable?

AlwaysALearner Over a year ago

By using a "dot", you are making AngularJS look up the prototype chain. Read more here: stackoverflow.com/questions/18716113

Collectives™ on Stack Overflow

ng-model input inside an angular-ui modal controller is undefined

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related