将视图中的值传递给AngularJS中的控制器
问题描述:
我将作为我的Angular应用程序的模板,所以我的应用程序目录结构非常漂亮整齐,可以让您了解我的项目是如何构建的。我在我的应用程序中有两条路线,一条叫做'main',另一条'sub'。将视图中的值传递给AngularJS中的控制器
当我在我的'主'视图中,我有一个链接,然后将用户转发到'sub'视图。我怎样才能通过我的'主'视图的链接将简单的值传递给'sub'控制器?
即我的链接是一个标准的HTML链接:
<a href="/#/sub">Go to sub</a>
当你打了sub.js控制器可以将某些数据添加到$范围为副视点等。我想在从“主”视图......希望是有道理通过了“子”访问控制器中的价值..
答
从我的理解你基本上想要在两个控制器之间进行通信。
第一个本能可能是创建一个父范围并将数据绑定到它,但有一个更好的方法,一个服务。
您将数据绑定到这个服务,它可以作为您的控制器之间的信使,像这样:
angular.module('app', [])
.factory('Data', dataService)
.controller('firstController', firstController)
.controller('secondController', secondController);
function dataService() {
return { message: "I'm data from a service" };
}
function firstController($scope, Data) {
$scope.data = Data;
}
function secondController($scope, Data) {
$scope.data = Data;
}
和标记:
<h2>First controller</h2>
<div ng-controller="firstController">
<input type="text" ng-model=data.message />
{{ data.message }}
</div>
<h2>Second controller</h2>
<div ng-controller="secondController">
<input type="text" ng-model=data.message />
{{ data.message }}
</div>
答
绑定变量dataToFoward
这是mainCtrl
<a ng-href="#/sub/{{dataToFoward}}">Go to sub</a>
一个$ scope变量
在路线,
when("/sub/:sampleData", {templateUrl: "pathToTemplate" }).
在副控制器
,
app.controller('subCtrl', function($routeParams,$scope) {
$scope.fromMain = $routeParams.sampleData;
});
在链接,我必须使用'ng-href'还是正常的'href'也好? – Tiwaz89 2014-10-30 10:37:02
它很好地使用'ng-href',因为**可能是**'$ scope.dataToFoward'变量在您点击链接时未在控制器中设置。 – 2014-10-30 10:39:00
如果在您点击链接'href =“#/ sub/{{dataToFoward}}”'时未设置'$ scope.dataToFoward'将导致'404'错误,但是'ng-href =“#/ sub/{{dataToFoward}}“'只在'dataToFoward'设置后才起链接作用,在'dataToFoward'设置之前它不会点击。 – 2014-10-30 10:45:19