AngularJS文本框返回未定义值

Question

AngularJS文本框返回未定义值

3

当我在Bootstrap模态框中按下我的检查按钮时，我希望在控制台中打印出我的文本框的值。但是我的文本框返回一个未定义。似乎所有代码都运行完美。

这是链接 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>

- Bharath Kumar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nitsan Baleli · Accepted Answer

由于您的模态框设置了自己的控制器，因此它有自己的作用域，

当您执行'check'函数时，它试图警报$scope.new，

$scope.new未在模态框作用域上设置。

一种克服这个问题的方法是将新变量传递到函数中，并让函数警报传递的值。

这里是一个修复后的plunkr

在调用check()时，传入新变量：

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

在你的控制器中将check函数改为：

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