Comment accéder au composant parent dans angularjs 1.5

Salut, je suis en train d'affichage simple des composants dans angularjs où l'enfant a besoin d'accéder parent nom.Et mon code comme ceci:

Fichier HTML:

<html>
<head>
<script type='text/javascript' src='angular.min-1.5.0.js'></script>
<script type='text/javascript' src='app.js'></script>
</head>
<body ng-app="componentApp">
<div ng-controller="helloCnt"> 
<hello name="Parent"></hello>
<hello1 name="Child"></hello1>  
<label>List: <input name="namesInput" ng-model="names" ng-list=" | "   required></label>
</div>
</body>
</html>

CODE:

app
.component('hello',{
transclude: true,
template:'<p>Hello I am {{$ctrl.name}} and ctrl name is {{myName}}</p>',
bindings: { name: '@' },
  controller: function($scope){
    $scope.myName = 'Alain';
    alert(1);
  }
})

app
.component('hello1',{
require: {
    parent: 'hello'
  },
template:'<p>Hello I am {{$ctrl.name}} && my parent is {{myNameFromParent}} </p>',
bindings: { name: '@' },

  controller: function($scope){
    $scope.myNameFromParent=this.parent.myName;
    alert(2);
  }
});

Et il renvoie une erreur :

TypeError: Cannot read property 'monnom' undefined

Je ne suis pas en mesure de comprendre ce qui cloche dans le code et pourquoi il ne peut pas trouver le parent.Toutes les entrées sur l'erreur que j'ai fais.Semble être un petit, j'ai peut-être manqué.

bonjour et hello1 sont frère de portée, une fois vérifier que!
Je pense que quelque chose de mal avec votre composant de la structure. Un composant ne savent rien sur le composant parent. C'est la meilleure pratique de la conception des composants.

OriginalL'auteur Ambar Bhatnagar | 2016-08-09

  1. 3

    D'hériter avec l'exigent, les composants doivent être imbriquées:

    <hello name="Parent"></hello>
<hello1 name="Child"></hello1>

    au lieu de faire

    <hello name="Parent">
    <hello1 name="Child"></hello1>
</hello>

    Ensuite, vous pouvez exiger que le parent comme suit:

    require: {
    parent: '^^hello'
  },
    salut.pourriez-vous également expliquer quelle est la différence entre l'utilisation de '^' et '^^' tout en héritant des parents dans le besoin de la propriété?
    avec ^ vous avez accès à un parent d'un contrôleur local et ^^ juste le parent.
    tout à fait bien.

    OriginalL'auteur gyc

  2. 4

    En fait j'ai eu la réponse après avoir fait suite à une modification de la réponse de @gyc souligné:

    CODE JS:

    angular
    .module('componentApp', [])
    .controller('helloCtrl', function ($scope) {
        $scope.names = ['morpheus', 'neo', 'trinity'];
    })
    .component('hello', {
        transclude: true,
        template: '<p>Hello I am {{parentCtrl.name}} and my name is {{parentCtrl.myName}}</p><ng-transclude></ng-transclude>',
        controllerAs: 'parentCtrl',
        controller: function ($scope) {
            this.myName = 'Braid';
        },
        bindings: {
            name: '@'
        }
    })
    .component('hello1', {
        template: '<p>Hello I am {{$ctrl.name}} && my parent is {{myNameFromParent}}  </p>',
        controller: function ($scope) {
            this.$onInit = function () {
                $scope.myNameFromParent = this.parent.myName;
            };

        },
        bindings: {
            name: '@'
        },
        require: {
            parent: '^hello'
        }
    });

    HTML:

    <html>
<body ng-app="componentApp">
    <div ng-controller="helloCtrl">
        <hello name="Parent">
            <hello1 name="Child"></hello1>
        </hello>
        <label>List:
            <input name="namesInput" ng-model="names" ng-list=" | " required>
        </label>
    </div>
</body>
</html>

    L'erreur que je faisais n'était pas à la suite de la imbriquée format composant et n'utilisant pas de transclude à mes parents. Le reste a bien fonctionné quand j'ai fait ces deux changements et modifié mon code ultérieure.

    P. S - ng-voir la liste en HTML n'a rien à voir avec les composants.C'était pour d'autres raisons.

    @gyc - merci pour l'aide.Votre contribution a aidé.

    @daan.desmedt - j'espérais pour la solution dans les composants non directives.

    OriginalL'auteur Ambar Bhatnagar