Question

我正在编写一个程序，将文本框中的文本显示为一个框。这是使用角度js完成的。我被困在那个部分，我无法将值从一个控制器传递到另一个控制器。这是代码：

<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;
});

到目前为止，当我输入时，该值会显示在框内。这是同时进行的。但我只想在单击按钮时显示文本。谢谢

Answer 1

在InputController的范围内，ng-model标记上的input直接绑定到用于在控制器之间共享数据的服务。

在输入上创建不同的模型。因此，在您的示例中，您可以拥有如下模型：

<input class="input-text" ng-model="inputText">

在InputController功能中，您可以在点击后将附加到input标签的模型中的数据传递给服务。使用您的示例，这应该如下所示：

$scope.onClick = function () {
    $scope.output.text = $scope.inputText ;
}

这样，当您在输入框内键入内容时，数据将存储在不同的模型中，只有当您单击OutputController范围内的按钮时，才会在InputController中更新数据。

以角度js将值从一个控件传递到另一个控件

1 个答案: