Wie übergeordnete Komponente in AngularJS 1.5

Hallo zuzugreifen Ich versuche, einfache Komponenten in AngularJS anzuzeigen, in dem Kind Eltern zugreifen muss name.And mein Code sieht wie folgt aus:Wie übergeordnete Komponente in AngularJS 1.5

HTML-Datei:

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

Und es wirft einen Fehler:

Typeerror: kann nicht richtig lesen ty 'myName' von undefined

Ich bin nicht in der Lage, herauszufinden, was im Code falsch ist und warum es die Eltern nicht finden kann.Alle Eingaben auf den Fehler, den ich mache.Scheint, ein kleiner zu sein, könnte ich verpasst haben.

Quelle

2016-08-09 Ambar Bhatnagar

hallo und hallo1 sind Geschwisterbereich, einmal überprüfen, dass! –

Ich denke etwas stimmt nicht mit Ihrer Komponentenstruktur. Eine Komponente sollte nichts über die Elternkomponente wissen. Dies ist die beste Vorgehensweise beim Komponentendesign. – scokmen

mit erben erfordern, können die Komponenten verschachtelt werden müssen:

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

statt

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

tun Dann können Sie die Eltern benötigen etwa so:

require: { 
    parent: '^^hello' 
    },

Quelle

2016-08-09 12:59:23 gyc

hi.können Sie auch erklären, was ist der Unterschied zwischen der Verwendung von '^' und '^^' beim Erben Eltern in Require-Eigenschaft? –

@AmbarBhatnagar mit^Sie greifen auf einen Elternteil einen lokalen Controller und ^^ nur die Eltern. – gyc

@nicht ganz verstanden. –

Eigentlich I bekam die Antwort, nachdem folgende Änderung mit der Antwort @GYC zeigte:

JS Code:

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>

Der gemeinsame Fehler, den ich tat es nicht wurde im Anschluss an das verschachtelte Komponentenvideo-Format und nicht transcluden in meinen Eltern verwenden. Der Rest funktionierte gut, als ich diese zwei Änderungen vornahm und meinen nachfolgenden Code änderte.

P.S - Die in HTML enthaltene ng-Liste hat nichts mit Komponenten zu tun. Das war für andere Zwecke.

@ gyc - danke für die Hilfe. Ihre Eingabe hat geholfen.

@ daan.desmedt - Ich hatte auf die Lösung in Komponenten nicht Richtlinien hoffen.

Quelle

2016-08-10 11:07:41

Wie übergeordnete Komponente in AngularJS 1.5

Antwort

Verwandte Themen