Làm thế nào để truy cập vào phần phụ huynh trong angularjs 1,5

Hi tôi đang cố gắng để hiển thị các thành phần đơn giản trong angularjs nơi con cần phải truy cập vào mẹ name.And mã của tôi đi như thế này:Làm thế nào để truy cập vào phần phụ huynh trong angularjs 1,5

HTML file:

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

Mã sản phẩm:

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

Và nó ném một lỗi:

lỗi Loại: không thể đọc đúng ty 'myName' của undefined

Tôi không thể tìm ra những gì sai trong mã và lý do tại sao nó không thể tìm thấy parent.Any đầu vào sai lầm tôi đang làm. Có vẻ là một nhỏ tôi có thể đã bỏ lỡ.

Nguồn

2016-08-09 Ambar Bhatnagar

hello và hello1 là phạm vi anh chị em, sau khi kiểm tra điều đó! –

Tôi nghĩ có điều gì đó sai với cấu trúc thành phần của bạn. Một thành phần không nên biết gì về thành phần cha. Đây là thực hành tốt nhất về thiết kế thành phần. – scokmen

Để kế thừa với yêu cầu, các thành phần cần phải được lồng vào nhau:

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

thay vì làm

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

Sau đó, bạn có thể yêu cầu phụ huynh như vậy:

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

Nguồn

2016-08-09 12:59:23 gyc

hi.could bạn cũng giải thích sự khác biệt giữa việc sử dụng '^' và '^^' trong khi kế thừa cha mẹ trong yêu cầu tài sản là gì? –

@AmbarBhatnagar với^bạn truy cập vào cha mẹ một bộ điều khiển cục bộ và^^ chỉ cha mẹ. – gyc

@không hoàn toàn hiểu. –

Thật sự tôi có câu trả lời sau khi thực hiện sửa đổi sau với câu trả lời @gyc chỉ:

JS Mã sản phẩm:

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>

Sai lầm thường gặp Tôi đã làm việc đó đã không tuân theo định dạng thành phần lồng nhau và không sử dụng transclude trong cha mẹ của tôi. Phần còn lại hoạt động tốt khi tôi thực hiện hai thay đổi này và sửa đổi mã tiếp theo của mình.

P.S - Danh sách ng được bao gồm trong HTML không liên quan gì đến các thành phần. Đó là vì mục đích khác.

@gyc - cảm ơn sự trợ giúp. Đầu vào của bạn đã giúp.

@ daan.desmedt - Tôi đã hy vọng giải pháp trong các thành phần không phải là chỉ thị.

Nguồn

2016-08-10 11:07:41

Làm thế nào để truy cập vào phần phụ huynh trong angularjs 1,5

Trả lời

Các vấn đề liên quan