如何將數據從父組件發送到AngularJs中的子組件

這似乎是一個非常簡單的問題，但我還沒有得到它的答案很長一段時間。問題是，當你有一個組件層次結構時，你如何將數據從父組件傳遞到子組件，以便孩子們能夠訪問其範圍內的數據（或其他變量？）如何將數據從父組件發送到AngularJs中的子組件

我是使用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>

來源

2017-03-05 Shaarad Dalvi

當你使用組件時，它本身就是指令的糖語法。您可以
1）require父組件的控制器。欲瞭解更多信息，請閱讀intercomponent communication 2）將數據作爲bindings傳遞。

請看下面的例子：

實施例＃1：

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

 
// this is parent component 
 
angular 
 
    .module('dependency', ['dependency2']) 
 
    .component('dependency', { 
 
    template: '<div>{{$ctrl.dependencyScopedVariable}}</div>' + 
 
     '<dependency2 ng-repeat="childParam in ' + '$ctrl.childComponentParams"></dependency2>', 
 
    controller: function dependencyController() { 
 
     this.dependencyScopedVariable = "Some local variables of dependency"; 
 
     this.childComponentParams = [{ 
 
     name: "child1" 
 
     }, { 
 
     name: "child2" 
 
     }]; 
 
    } 
 
    }); 
 

 
// this is child component 
 
angular. 
 
module('dependency2', []) 
 
    .component('dependency2', { 
 
    require: { 
 
     dependencyCtrl: '^dependency' 
 
    }, 
 
    template: '<div>{{$ctrl.itemGotFromParent}}</div>', 
 
    controller: function dependency2Controller() { 
 
     
 
     this.$onInit = function() { 
 
     this.itemGotFromParent = this.dependencyCtrl.childComponentParams; 
 
     } 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
<script src="script.js"></script> 
 

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

實施例＃2：使用組件綁定（在指令範圍）

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

 
// this is parent component 
 
angular 
 
    .module('dependency', ['dependency2']) 
 
    .component('dependency', { 
 
    template: '<div>{{$ctrl.dependencyScopedVariable}}</div>' + 
 
     '<dependency2 data="childParam" ng-repeat="childParam in ' + '$ctrl.childComponentParams"></dependency2>', 
 
    controller: function dependencyController() { 
 
     this.dependencyScopedVariable = "Some local variables of dependency"; 
 
     this.childComponentParams = [{ 
 
     name: "child1" 
 
     }, { 
 
     name: "child2" 
 
     }]; 
 
    } 
 
    }); 
 

 
// this is child component 
 
angular. 
 
module('dependency2', []) 
 
    .component('dependency2', { 
 
    bindings: { 
 
     data: '<' 
 
    }, 
 
    template: '<div>{{$ctrl.itemGotFromParent}}</div>', 
 
    controller: function dependency2Controller() { 
 

 
     this.$onInit = function() { 
 
     this.itemGotFromParent = this.data; 
 
     } 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script> 
 
<script src="script.js"></script> 
 

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

來源

2017-03-05 12:45:49 Gaurav

好的，這看起來像是解決方案之一。兩個問題： 1）'傳遞數據作爲範圍變量'或'需要父組件的控制器'是兩種方法相同嗎？ 2）在這裏，每個孩子都可以訪問整個'childComponentParams'數組。我們不能將這個數組的一個元素傳遞給基於索引的每個孩子嗎？ –

當我提到'將數據作爲範圍變量傳遞'時，讓我糾正自己，我的意思是使用'bindings'作爲'component'調用的角度。其次，兩種方法都不同，我已經添加了示例＃2來演示這種技術。我可以通過巧妙地使用'ng-if'來傳遞個人元素。 – Gaurav

另外一件事，當使用'require'時，你可以訪問控制器實例本身，並且通過它你可以訪問該控制器的'this'對象上的任何東西。 – Gaurav

如何將數據從父組件發送到AngularJs中的子組件

回答

相關問題