Question

这似乎是一个相当简单的问题，但我已经有很长一段时间没有得到答案了。问题是，当你有一个组件层次结构时，如何将数据从父组件传递到子组件，以便子组件能够访问其范围内的数据（或其他变量？）

我正在使用AngularJs 1.5.5

以下是我现在所拥有的内容，我在JavaScript代码中添加了关于我实际想要实现的内容的注释。 - https://plnkr.co/edit/blY85rvARIqkmfCnRBOV?p=preview

的index.html

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp">
      <dependency></dependency>
    </div>
  </body>

</html>

的script.js

// Code goes here
angular.module('myApp', ['dependency']);

// this is parent component
angular.
module('dependency', ['dependency2']).
component('dependency', {
  templateUrl: 'dependency.html',
  controller: ['$scope', function dependencyController($scope) {
    $scope.dependencyScopedVariable = "Some local variables of dependency";
    $scope.childComponentParams = [{ name: "child1"}, { name: "child2"}];
  }]
});

// this is child component
angular.
module('dependency2', []).
component('dependency2', {
  templateUrl: 'dependency2.html',
  controller: ['$scope', function dependency2Controller($scope) {
    // How to access childParam from parent here?
    $scope.itemGotFromParent = "this should be from parent";
  }]
});

dependency.html

<div>{{dependencyScopedVariable}}</div>
<dependency2 ng-repeat="childParam in childComponentParams"></dependency2>

dependency2.html

<!-- How to get the childParam repeated in ng-repeat here? -->
<div>{{itemGotFromParent}}</div>

Answer 1

当你正在使用组件时，它本身就是指令的糖语法。
＆＃xA;你可以＆＃xA; 1） require 父组件的控制器。有关详细信息，请参阅组件间通信＆＃xA; 2）将数据作为 bindings 。

＆＃xA;＆＃xA;

请看以下示例：

＆＃xA;＆＃xA;

示例＃1：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

  //代码在这里＆＃xD;＆＃xA; angular.module（'myApp'，['dependency']）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; //这是父组件＆＃xD; ＆＃XA;角＆＃的xD;＆＃XA; .module（'dependency'，['dependency2']）＆＃xD;＆＃xA; .component（'dependency'，{＆＃xD;＆＃xA; template：'＆lt; div＆gt; {{$ ctrl.dependencyScopedVariable}}＆lt; / div＆gt;'+＆＃xD;＆＃xA;'＆lt; dependency2 ng-repeat =“childParam in'+'$ ctrl.childComponentParams”＆gt;＆lt; / dependency2＆gt;'，＆＃xD;＆＃xA; controller：function dependencyController（）{＆＃xD;＆＃xA; this.dependencyScopedVariable =“依赖的一些局部变量”;＆＃xD;＆＃xA; this.childComponentParams = [{＆＃xD;＆＃xA; name：“child1”＆＃xD;＆＃xA;}，{＆＃xD ;＆＃xA;名称：“child2”＆＃xD;＆＃xA;}];＆＃xD;＆＃xA;}＆＃xD;＆＃xA;}）;＆＃xD;＆＃xA;＆ #xD;＆＃xA; //这是子组件＆＃xD;＆＃xA; angular。＆＃xD;＆＃xA; module（'dependency2'，[]）＆＃xD;＆＃xA; .component（'dependency2'，{＆＃xD;＆＃xA; require：{＆＃xD;＆＃xA; dependencyCtrl：'^ dependency'＆＃xD;＆＃xA;}，＆＃xD;＆＃xA ; template：'＆lt; div＆gt; {{$ ctrl.itemGotFromParent}}＆lt; / div＆gt;'，＆＃xD;＆＃xA; controller：function dependency2Controller（）{＆＃xD;＆＃xA;＆＃xD; ＆＃xA; this。$ onInit = function（）{＆＃xD;＆＃xA; this.itemGotFromParent = this.dependencyCtrl.childComponentParams;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;}＆ #xD;＆＃xA;}）;

＆＃xD;＆＃xA;

 ＆lt; script src =“https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js”＆gt;＆lt; / script＆gt;＆＃xD;＆＃xA;＆lt; script src =“script.js”＆gt;＆lt; / script＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; div ng-app =“myApp”＆gt;＆＃xD;＆＃xA; ＆LT;依赖性＆GT;＆LT; /依赖性＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;

＆＃的xD;＆＃XA;

＆＃xD;＆＃xA; 
＆＃xA;＆＃xA; 示例＃2：使用组件的绑定（指令范围）
＆＃xA;＆＃xA ;  
＆＃xD;＆＃xA; ＆＃xD;＆＃xA;   //代码在这里＆＃xD;＆＃xA; angular .module（'myApp'，['dependency']）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; //这是父组件＆＃xD;＆＃xA; angular＆＃xD;＆＃xA ; .module（'dependency'，['dependency2']）＆＃xD;＆＃xA; .component（'dependency'，{＆＃xD;＆＃xA; template：'＆lt; div＆gt; {{$ ctrl.dependencyScopedVariable}}＆lt; / div＆gt;'+＆＃xD;＆＃xA;'＆lt; dependency2 data =“childParam”ng-repeat =“childParam in'+'$ ctrl.childComponentParams”＆gt;＆lt; / dependency2＆gt;'，＆＃xD;＆＃xA; controller：function dependencyController（）{＆＃xD;＆＃ xA; this.dependencyScopedVariable =“依赖的一些局部变量”;＆＃xD;＆＃xA; this.childComponentParams = [{＆＃xD;＆＃xA; name：“child1”＆＃xD;＆＃xA;} ，{＆＃xD;＆＃xA;名称：“child2”＆＃xD;＆＃xA;}];＆＃xD;＆＃xA;}＆＃xD;＆＃xA;}）;＆＃xD; ＆＃xA;＆＃xD;＆＃xA; //这是子组件＆＃xD;＆＃xA; angular。＆＃xD;＆＃xA; module（'dependency2'，[]）＆＃xD;＆＃ XA; .component（'dependency2'，{＆＃xD;＆＃xA;绑定：{＆＃xD;＆＃xA;数据：'＆lt;'＆＃xD;＆＃xA;}，＆＃xD;＆＃xA ; template：'＆lt; div＆gt; {{$ ctrl.itemGotFromParent}}＆lt; / div＆gt;'，＆＃xD;＆＃xA; controller：function dependency2Controller（）{＆＃xD;＆＃xA;＆＃xD; ＆＃xA; this。$ onInit = function（）{＆＃xD;＆＃xA; this.itemGotFromParent = this.data;＆＃xD;＆＃xA;}＆＃xD;＆＃xA;}＆＃xD ;＆＃xA;}）;  
＆＃xD;＆＃xA;  ＆lt; script src = “https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src =” script.js“＆gt;＆lt; / script＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; div ng-app =”myApp“＆gt;＆＃xD;＆＃xA; ＆LT;依赖性＆GT;＆LT; /依赖性＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;  
＆＃的xD;＆＃XA; 
＆＃的xD;＆＃XA; 
＆＃的xD;＆＃XA; ＆＃XA;

如何将数据从父组件发送到AngularJs中的子组件

1 个答案: