组件间通信

Question

我被告知要将AngularJS的component合并到我的应用中。在使用组件之前，我有两个控制器，patentList和patentItem。当用户点击patent list中的某个项目时，它会加载有关该特定patent item的更多详细信息。

现在我已将控制器包含在components中，数据无法填充patent item表。这是（我认为）patent item是patent list的孩子，我能够访问父母数据。

当我记录所选项目时，它会显示所有属性和值。

我的问题是，现在我使用controller如何访问父components的数据？任何帮助将不胜感激

列表专利

<tr ng-repeat="x in $ctrl.patents">
    <td ng-click="$ctrl.select(x)"><a ui-sref="patents.list.item({id: x.id})">{{x.applicationNumber}}</a></td>
    <td ng-bind="x.clientRef"></td>
    <td ng-bind="x.currentRenewalCost">$</td>
    <td ng-bind="x.costBandEndDate"></td>
    <td ng-bind="x.renewalCostNextStage"></td>
    <td ng-bind="x.renewalDueDate"></td>
</tr>

专利项

<tr ng-repeat="x in $ctrl.patentItem">
    <td><input type="text" ng-model="x.patentApplicationNumber"></td>
    <td><input type="text" ng-model="x.clientRef"></td>
    <td><input type="text" ng-model="x.renewalStatus"></td>
    <td><input type="text" ng-model="x.costBandEndDate"></td>
    <td><input type="text" ng-model="x.renewalCostNextStage"></td>
    <td><input type="text" ng-model="x.renewalDueDate"></td>
</tr>

app.js

var app = angular.module('myApp', ['ngRoute', 'ui.router']);

app.config(function($stateProvider, $locationProvider, $urlRouterProvider, localStorageServiceProvider) {

    app.component('patentList', {
        scope: {},
        templateUrl: "templates/patents/list/list-patents.htm",
        controller: function(loadPatentsService, loadPatentItemService) {

            var vm = this;

            vm.select = function(item) { 
               vm.patentItem = loadPatentItemService.select(item);
               console.log(item)
            }
        }
    })
});

app.component('patent', {
    scope: {},
    templateUrl: "templates/patents/list/patent-item.htm",  
    controller: function(patentTabService, loadPatentItemService) {

        var vm = this;

       //LOAD OF CODE FOR A TAB PANEL

    }
})

app.factory('loadPatentItemService', function() {

    var factory = {};

        factory.select = function(item) {
            factory.storeSelect = [];
            selectedItem = item; 
            factory.storeSelect.push(selectedItem)
            return [selectedItem];
        }      

    return factory;

})

app.factory('patentTabService', function() {

    var factory = {};

        //CODE RELATED TO THE TAB PANEL

    return factory;

});

Answer 1

组件间通信

这可以通过为require属性提供对象映射来在组件中实现。对象键指定属性名称，在该属性名称下，所需的控制器（对象值）将绑定到需求组件的控制器。

有关详细信息，请参阅

Answer 2

您可以将$emit/$broadcast与$scope.$on

一起使用

here is the plunker for your reference

Answer 3

您需要使用$broadcast和$on

$scope.$broadcast ('key', {data: value}); //to set the value in parent 

 $scope.$on('key', function (event, data) {}); // to get the value in child

如何在angularjs中访问组件内的父控制器数据

3 个答案:

组件间通信