Javascript 无法在组件之间绑定某些数据？
我正在计算/构建指令（组件）中的javascript对象，并希望将其传递给另一个组件 在我的例子中，我指的是heroList.js（源组件）中的英雄列表，我想将passingObject传输到someOtherTabPage.js（目标组件） 这是我最喜欢的。你能帮我解决这个问题吗？我不知道在我的两个组件之间绑定passingObject有什么问题Javascript 无法在组件之间绑定某些数据？,javascript,angularjs,Javascript,Angularjs,我正在计算/构建指令（组件）中的javascript对象，并希望将其传递给另一个组件 在我的例子中，我指的是heroList.js（源组件）中的英雄列表，我想将passingObject传输到someOtherTabPage.js（目标组件） 这是我最喜欢的。你能帮我解决这个问题吗？我不知道在我的两个组件之间绑定passingObject有什么问题 (function(angular) { 'use strict'; function someOtherTabPageController
(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);
我认为，在组件绑定了
thispassingObjectthisfunction someOtherTabPageController($scope) {
var ctrl = this;
//do some work with the passingObject
alert(JSON.stringify(ctrl.passingObject));
}
passingObject(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>
（函数（角度）{
"严格使用",；
函数someOtherTabPageController（$scope，$rootScope）{
var ctrl=this；
//对passingObject执行一些操作
警报（$rootScope.passingObject）；
}
angular.module（'heroApp'）.component（'someOtherTabPage'{
templateUrl:'someOtherTabPage.html'，
控制器：其他选项卡页控制器，
绑定：{
传递对象：'='
}
});
})（窗口角度）；
（功能（角度）{
"严格使用",；
函数HeroListController（$scope、$element、$attrs、$rootScope）{
var ctrl=this；
//这将由$http等加载。
ctrl.list=[
{
名字：'超人'，
位置：“”
},
{
名字：“蝙蝠侠”，
地点：“韦恩庄园”
}
];
ctrl.create=函数（英雄）{
ctrl.list.push（angular.copy（hero））；
};
ctrl.updateHero=函数（英雄、道具、值）{
英雄[道具]=价值；
};
ctrl.deleteHero=函数（hero）{
var idx=ctrl.list.indexOf（hero）；
如果（idx>=0）{
控制列表拼接（idx，1）；
}
};
$scope.passingObject=ctrl.list；
$rootScope.passingObject=ctrl.list；
}
angular.module（'heroApp'）。组件（'heroList'{
templateUrl:'heroList.html'，
控制器：HeroListController，
绑定：{
onCreate:“&”
}
});
})（窗口角度）；
示例-示例heroComponentTree生成