在角度js中将值从一个控件传递到另一个控件[重复]

Posted

技术标签:

【中文标题】在角度js中将值从一个控件传递到另一个控件[重复]【英文标题】:Passing value from one control to another in angular js [duplicate] 【发布时间】:2013-06-26 07:58:52 【问题描述】:

我正在编写一个程序来将文本框中的文本显示到一个框中。这是使用 Angular 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;
);

到目前为止,值在我输入的同时显示在框内。那是在同一时间。但我只想在单击按钮时显示文本。谢谢你

【问题讨论】:

@Stewie 函数在那里以不同的方式编写。我是初学者,所以对angular js了解不多。 Tip: 你声明了application 变量但从不使用它。尝试用相同的变量替换 angular.module("MyApp") 【参考方案1】:

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

在输入上创建不同的模型。因此,在您的示例中,您可以使用如下模型:

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

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

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

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

【讨论】:

以上是关于在角度js中将值从一个控件传递到另一个控件[重复]的主要内容,如果未能解决你的问题,请参考以下文章

在android中将值从一个窗口传递到另一个窗口

在 SWIFT 语言的 Storyboard 中将值从一个 ViewController 传递到另一个 ViewController

使用 Struts 2 在项目中将查询字符串中的键值从一个页面传递到另一个页面

如何在iphone中将值从一个标签栏传递到另一个标签栏

以角度 8 将文本字段的值从一个组件传递到另一个组件

如何在单页应用程序中以角度将数据从一页传递到另一页