2014-09-23 6 views
3

Когда я нажимаю свою кнопку, проверяю bootstrap modal, я хочу напечатать значение моего текстового поля в консоли. Но мое текстовое поле возвращает неопределенное. Кажется, что весь код работает отлично.AngularJS textbox return undefined value

это ссылка Plunker

<!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> 

ответ

5

Поскольку ваш модальный установлен, чтобы иметь свой собственный контроллер, и, следовательно, свою собственную сферу,

при выполнении функции «проверить» он пытается предупредить $ сферы .new,

$ scope.new не установлен в модальном объеме.

Один из способов преодоления этого - передать новую переменную в функцию и позволить функции оповестить пройденное значение.

вот фиксированный plunkr

при вызове проверки(), перейти в новую переменную:

<button ng-click="check(new)">check</button> 

и в контроллере проверки изменений функции:

$scope.check = function(text) { 
    alert(text); 
}; 
+0

Спасибо Это работает ... –

+0

Примите ответ, если он решит вашу проблему. так вы это делаете: http://meta.stackexchange.com/a/5235 @BharathKumar –