Jak uzyskać dostęp do elementu nadrzędnego w angularjs 1,5

Hi Próbuję wyświetlić proste składniki w angularjs gdzie dziecko potrzebuje dostępu rodzica name.And mój kod wygląda tak:Jak uzyskać dostęp do elementu nadrzędnego w angularjs 1,5

pliku 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>

KOD:

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

I to wyrzuca błąd:

TypeError: nie można odczytać właściwą ty 'myName' z undefined

Nie jestem w stanie dowiedzieć się, co jest nie tak w kodzie i dlaczego nie może znaleźć rodzica.Każdy wkład w błąd, który robię.Seems być mały, który mogę tęsknić.

Źródło

2016-08-09 Ambar Bhatnagar

witam i cześć 1 to rodzeństwo, raz to sprawdź! –

Myślę, że coś jest nie tak z twoją strukturą komponentów. Komponent nie powinien nic wiedzieć o komponencie nadrzędnym. Jest to najlepsza praktyka projektowania komponentów. – scokmen

dziedziczyć z wymagać, elementy muszą być zagnieżdżone:

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

zamiast robić

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

Następnie można wymagać od rodzica tak:

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

Źródło

2016-08-09 12:59:23 gyc

Witam. Czy możesz również wyjaśnić, jaka jest różnica między używaniem "^" i "^^" podczas dziedziczenia właściwości rodzica w celu? –

@AmbarBhatnagar z^uzyskujesz dostęp do nadrzędnego lokalnego kontrolera i^^ tylko rodzic. – gyc

@ nie całkiem to dostałem. –

Właściwie dostałem odpowiedź po wprowadzeniu modyfikacji z odpowiedzią @gyc wskazano:

JS KOD:

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>

Wspólna błąd robiłem to nie było po zagnieżdżony formatu komponentu, a nie za pomocą transclude w moim rodzicem. Reszta zadziałała dobrze, gdy dokonałem tych dwóch zmian i zmodyfikowałem mój kolejny kod.

P.S - Lista ng zawarta w HTML nie ma nic wspólnego z komponentami. To było w innym celu.

@gyc - dzięki za pomoc. Twoje dane pomogły.

@ daan.desmedt - Miałem nadzieję na rozwiązanie w komponentach, a nie dyrektywach.

Źródło

2016-08-10 11:07:41

Jak uzyskać dostęp do elementu nadrzędnego w angularjs 1,5

Odpowiedz

Powiązane problemy