javascript - Unable to bind some data between components?

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

javascript - Unable to bind some data between components?

asked Jan 31, 2022 in Technique[技术] by 深蓝 (71.8m points)

I am computing/building a javascript object in a directive (component) and I want to pass it to another component.

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).

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

240 views

1 Answer

深蓝 · Answer 1 · 2022-01-31T07:23:43+0000

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>

Categories

javascript - Unable to bind some data between components?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags