current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 41 down vote favorite
11

plunker: http://plnkr.co/edit/wURNg8ByPYbEuQSL4xwg

example.js:

angular.module('plunker', ['ui.bootstrap']);
  var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open = function () {
    var modalInstance = $modal.open({
      templateUrl: 'modal.html',
      controller: 'ModalInstanceCtrl'
    });
  };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {

  $scope.ok = function () {
    alert($scope.text);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};

index.html:

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

  <div ng-controller="ModalDemoCtrl">
    <button class="btn" ng-click="open()">Open me!</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
  </div>
 </body>
</html>

modal.html:

<div class="modal-header">
    <h3>I'm a modal!</h3>
</div>
<textarea ng-model="text"></textarea>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

Why I can't get the $scope.text defined in ModalInstanceCtrl, even though I can use $scope.ok and $scope.cancel?

share|improve this question
    
That's because you are alerting $scope.text before assignment. Just write $scope.text = "abc"; in your controller and you ll see that in the alert. –  CodeHater Sep 10 '13 at 10:18
    
The input comes from modal.html. Please see the related plunker. –  Manuel Bitto Sep 10 '13 at 10:23
    
Oops! Sorry about that. Have a look at my answer. –  CodeHater Sep 10 '13 at 10:29

2 Answers 2

up vote 56 down vote accepted

Looks like a scope issue. I got it to work like this:

var ModalInstanceCtrl = function ($scope, $modalInstance) {
    $scope.input = {};
    $scope.ok = function () {
        alert($scope.input.abc);
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
};

HTML:

<textarea ng-model="input.abc"></textarea>
share|improve this answer
3  
Yes, initializing $scope.input = {}; fixes it. Strange thing though. –  Manuel Bitto Sep 10 '13 at 10:36
3  
This is not strange, this is by design since the modal actually created a sub controller, and JS behavior is that if you try to get an object and your object doesn't have it than it will go to parent –  Ran Davidovitz Oct 2 '13 at 5:03
3  
Right, this is because of Javascript's prototypical inheritance. It can't find "input" on the current scope, so it checks that scope's prototype and so on until it happens upon an "input" property on one of the scopes in the prototype chain. This "input" property is an object so you have a reference to it and are able set an "abc" property on it. This little trick is often used in angular to manipulate a value somewhere in an ancestor scope. –  David Sanders Nov 6 '13 at 21:17
2  
True, nothing strange about it - although Javascript's prototypical inheritance might be difficult to grasp. I strongly recommend this read for clarification: github.com/angular/angular.js/wiki/Understanding-Scopes –  CloudRide Dec 3 '13 at 11:37
3  
Thanks! But why would $scope.input=""; not work? –  Narayana Mar 1 at 6:13
up vote 7 down vote

Angular-UI modals are using transclusion to attach modal content, which means any new scope entries made within modal are created in child scope.

You should use inheritance and initialize empty text entry in parent $scope or you can explicitly attach the input to parent scope:

<textarea ng-model="$parent.text"></textarea>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.