AngularJS文本框返回未定义的值

AngularJS textbox return undefined value

本文关键字：未定义 返回 文本 AngularJS      更新时间：2023-09-26

当我在引导模式中按下按钮检查时，我想在控制台中打印文本框的值。但我的文本框返回一个未定义的。似乎所有的代码都运行得很完美。

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

由于您的模态设置为有自己的控制器，因此也有自己的范围，

当你执行函数"check"时，它会试图提醒$scope.new，

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

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

这是一个固定的plunkr

调用check（）时，传入新变量：

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

并且在您的控制器更改检查功能中：

$scope.check = function(text) {
   alert(text);
};
相关文章：