我正在编写一个程序来将文本从文本框显示到框中。这是使用 Angular js 完成的。我陷入了无法将值从一个 Controller 传递到另一个 Controller 的部分。代码如下:
<html ng-app="MyApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script data-require="angular.js@1.1.x" src="http://code.angularjs.org/1.1.5/angular.min.js" data-semver="1.1.5"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container">
<div class="box" ng-controller="OutputController">
{{output.text}}
</div>
<div class="row" ng-controller="InputController">
<input class="input-text" ng-model="output.text">
<button class="btnoutput btn-primary" ng-click="onClick()">Click</button>
</div>
</div>
</body>
</html>
JS:-
angular.module("MyApp",[]);
var application = angular.module("MyApp");
// Input
angular.module("MyApp").controller("InputController",function($scope,Share){
//$scope.output = Share;
$scope.onClick = function(){
$scope.output.text = "Hello " ;
}
});
// Output
angular.module("MyApp").controller("OutputController",function($scope,Share){
$scope.output = Share;
});
// Share the data
angular.module("MyApp").factory("Share",function(){
var object = {};
object.text = "";
return object;
});
到目前为止，当我键入时，该值会显示在框中。那是在同一时间。但我只想在单击按钮时显示文本。谢谢您
最佳答案
在 InputController 范围内，input 标记上的 ng-model 直接绑定(bind)到您用于共享的服务 Controller 之间的数据。
在输入上创建不同的模型。因此，在您的示例中，您可以拥有如下模型:
<input class="input-text" ng-model="inputText">
在InputController函数内，您可以在点击后将附加到input标签的模型中的数据传递给服务。使用您的示例，这应该如下所示:
$scope.onClick = function () {
$scope.output.text = $scope.inputText ;
}
这样，当您在输入框中键入时，数据将存储在不同的模型中，并且仅当您单击 InputController< 范围内的按钮时，数据才会在 .OutputController 中更新
关于javascript - 在 Angular js中将值从一个控件传递到另一个控件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17366495/