Angular 1.5 вложенный компонент связывает родительское значение

Я новичок в angularjs. Я пытаюсь вложенный компонент angular 1.5. Могу ли я привязать свойство родительского компонента в дочернем компоненте.

Ex:

<div ng-app='cbsApp' ng-controller='cbsCnt as ct'>
    <cbs-cus-comp com-bind='ct.name'>
        <child child-com-bind='cbsCusCompCntAs.name'></child>
    </cbs-cus-comp>
</div>

Я могу получить КТ.значение имени в com-bind. Но не могу получить cbsCusCompCntAs.имя в child-com-bind. (cbsCusCompCntAs-это контроллер cbs-cus-comp)

Рабочая Plunker : https://plnkr.co/edit/axQwTn?p=preview

спасибо заранее.

7
angularjs components javascript

3 ответов

в первом случае вы ссылаетесь непосредственно на область контроллера через controllerAs.

при использовании компонентов в angular 1.5 вы можете получить свой родительский компонент через require что сделает свойства родителя доступными после $onInit по состоянию на Документация По Компонентам:

обратите внимание, что необходимые контроллеры не будут доступны во время создание экземпляра контроллера, но они гарантированно будут доступно только перед выполнением метода $onInit!

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

var child = {
    require     :  {parentComp:'^cbsCusComp'},
    template    :  'Child : <b{{cbsCusChildCompCntAs.childComBind}}</b>',
    controller  :  cbsCusChildCompCnt,
    controllerAs:  'cbsCusChildCompCntAs'
    };

и его контроллер для получения необходимых вам данных (я использовал те же имена, что и вы, чтобы увидеть его работу):

function cbsCusChildCompCnt(){
  this.$onInit = function() {
    this.childComBind = this.parentComp.name;
  };
}

обновил plunker составляет здесь.

7

Вау... какой замечательный пример... Мне потребовалось время, чтобы проанализировать его... Итак, я написал свою собственную (я думаю, немного более читаемую) версию. Я действительно не знаю, как работать с Plunker... вот код... выдержка из моего индекса.html файл

<div ng-controller='appCtrl as ctrl'>
    <parent bind-id='ctrl.name'>
        <child bind-toid='parentCtrlAs.name'></child>
    </parent>
</div>

The .файл JS

(function () {
'use strict';

var 
    parentComponent =   
    {
        bindings    :   
        {
            bindId:'='
        },
        controller  : parentCtrl,
        controllerAs: 'parentCtrlAs',
        restrict    : 'A',
        transclude  : true,
        templateUrl : 'parent.html',
    };

var 
    childComponent =    
    {
        controller  : childCtrl,
        controllerAs: 'childCtrlAs',
        restrict    : 'A',
        require     :
        {
            myParent    :'^parent'
        },
        templateUrl :   'child.html',
};


angular
    .module('app', [])
    .controller('appCtrl'   , appCtrl)
    .component('parent'     , parentComponent)
    .component('child'      , childComponent);


function appCtrl(){
    this.name = 'Main..';
}

function childCtrl(){
    this.$onInit = function() {
        this.bindToid = this.myParent.name;
    };
}

function parentCtrl(){
    this.name   =   'Parent Component';
}

})();

надеюсь, это поможет, С уважением, Джонни!--5-->

4

хотя использование параметра "require" работает, он создает тесно связанную связь между компонентом, действующим как дочерний, который использует параметр "require", и компонентом, действующим как родительский, который потребляет дочерние функции.

лучшее решение-использовать компонентную связь, как показано здесь.

в основном вы определяете функцию привязки в определении дочернего компонента, например,

angular.module('app').component('componentName', {
templateUrl: 'my-template.html',
bindings: {
       myFunction: '&'
},
controller: function() { // Do something here}
});

затем в родительская разметка вы предоставляете функцию для вызова,

Родительский HTML

<user-list select-user="$ctrl.selectUser(user)">
</user-list>

наконец, в Родительском контроллере укажите реализацию функции selectUser.

вот работает цок.

4