无法在组件之间绑定某些数据? [英] Unable to bind some data between components?
问题描述
我正在计算/构建指令(组件)中的javascript对象，并且希望将其传递给另一个组件.
I am computing/building a javascript object in a directive (component) and I want to pass it to another component.
在我的情况下，我指的是heroList.js(它是源组件)中的英雄列表，并且我想将passingObject转移到someOtherTabPage.js(它是目标组件)中.
In my case, I am referring to the list of heroes that that is in the heroList.js (which is the source component), and I want to transfer the passingObject to the someOtherTabPage.js (which is the destination component).
这是链接.您能帮忙解决这个问题吗，我将passingObject绑定到我的两个组件之间没有什么问题吗?
This is the link to my plunk. Can you please help with this problem, I don't what's wrong in binding the passingObject to between my two components?
(function(angular) {
'use strict';
function someOtherTabPageController($scope) {
//do some work with the passingObject
alert(JSON.stringify(passingObject));
}
angular.module('heroApp').component('someOtherTabPage', {
templateUrl: 'someOtherTabPage.html',
controller: someOtherTabPageController,
bindings :{
passingObject: '='
}
});
})(window.angular);
推荐答案
要使用相同的体系结构实现所需的功能，可以使用$ rootScope在控制器之间传递数据.这是更新的代码:
To achieve what you need with the same architecture you can use the $rootScope to pass the data between your controllers. Here is the updated code :
(function(angular) {
'use strict';
function someOtherTabPageController($scope,$rootScope) {
var ctrl = this;
//do some work with the passingObject
alert($rootScope.passingObject);
}
angular.module('heroApp').component('someOtherTabPage', {
templateUrl: 'someOtherTabPage.html',
controller: someOtherTabPageController,
bindings :{
passingObject: '='
}
});
})(window.angular);
(function(angular) {
'use strict';
function HeroListController($scope, $element, $attrs,$rootScope) {
var ctrl = this;
// This would be loaded by $http etc.
ctrl.list = [
{
name: 'Superman',
location: ''
},
{
name: 'Batman',
location: 'Wayne Manor'
}
];
ctrl.create = function(hero) {
ctrl.list.push(angular.copy(hero));
};
ctrl.updateHero = function(hero, prop, value) {
hero[prop] = value;
};
ctrl.deleteHero = function(hero) {
var idx = ctrl.list.indexOf(hero);
if (idx >= 0) {
ctrl.list.splice(idx, 1);
}
};
$scope.passingObject = ctrl.list;
$rootScope.passingObject = ctrl.list;
}
angular.module('heroApp').component('heroList', {
templateUrl: 'heroList.html',
controller: HeroListController,
bindings: {
onCreate: '&'
}
});
})(window.angular);
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-heroComponentTree-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="index.js"></script>
<script src="heroList.js"></script>
<script src="heroDetail.js"></script>
<script src="editableField.js"></script>
<script src="someOtherTabPage.js"></script>
</head>
<body ng-app="heroApp">
<hero-list></hero-list>
<some-other-tab-page></some-other-tab-page>
</body>
</html>
这篇关于无法在组件之间绑定某些数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
