AngularJS textbox return value undefined
When I click my button, check the bootstrap modal, I want to print the value of my textbox in my console. But my textbox is returning undefined. The whole code seems to work fine.
this is the Plunker link
<!doctype html>
<html ng-app="app" ng-controller="ModalDemoCtrl">
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="example1.js"></script>
</head>
<body>
<div ><button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
<script type="text/ng-template" id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<input type="text" ng-model="new" /><button ng-click="check()" >check</button>
<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>
</script>
</div>
</body>
</html>
+3
source to share
1 answer
Since your modal is set to its own controller and thus its own scope,
when you execute the 'check' function it tries to notify $ scope.new,
$ scope.new is not set on modal scope.
one way to overcome this is to pass a new variable to the function and let the function warn the passed value.
here's a fixed plunkr
when calling check (), pass a new variable:
<button ng-click="check(new)">check</button>
and in your controller replacement check function:
$scope.check = function(text) {
alert(text);
};
+5
source to share