Как получить доступ к родительский компонент в angularjs 1.5

Привет я пытаюсь отобразить простые компоненты в angularjs, где ребенок должен получить доступ к родителю name.And мой код выглядит следующим образом:Как получить доступ к родительский компонент в angularjs 1.5

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>

КОД:

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

И выдает ошибку:

TypeError: не удается прочитать надлежащее ty 'myName' of undefined

Я не могу понять, что не так в коде и почему он не может найти parent.Any входов на ошибку, которую я делаю. Кажется, это маленький, я могу пропустили.

источник

2016-08-09 Ambar Bhatnagar

привет и привет1 - родственные способности, один раз проверьте это! –

Я думаю, что что-то не так с вашей структурой компонента. Компонент ничего не должен знать о родительском компоненте. Это лучшая практика проектирования компонентов. – scokmen

Для наследования с требуют, компоненты должны быть вложенными:

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

вместо делать

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

Затем вы можете требовать родитель, как так:

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

источник

2016-08-09 12:59:23 gyc

hi.может ли вы также объяснить, в чем разница между использованием «^» и «^^» при наследовании родителя в требовании свойства? –

@AmbarBhatnagar с^вы получаете доступ к родительскому контроллеру и ^^ только к родительскому. – gyc

@ не совсем понял. –

На самом деле я получил ответ после внесения следующей модификации с ответом @gyc:

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>

Распространенная ошибка я делал это не следующий формат вложенного компонента, а не с помощью transclude в моем родителя. Остальное отлично работало, когда я сделал эти два изменения и изменил свой следующий код.

P.S - Список ng, включенный в HTML, не имеет ничего общего с компонентами. Это было для других целей.

@gyc - спасибо за помощь. Ваш вклад помог.

@ daan.desmedt - Я надеялся на решение в компонентах не директивы.

источник

2016-08-10 11:07:41

Как получить доступ к родительский компонент в angularjs 1.5

ответ

Смежные вопросы