Как вы используете ng-модель для получения данных из родительского компонента в AngularJS (версия 1.5.5)? - PullRequest
Новая
       0

Как вы используете ng-модель для получения данных из родительского компонента в AngularJS (версия 1.5.5)?

0 голосов
/ 13 февраля 2020

Ниже приведено изображение вывода моего кода; Я знаю, как отображать данные, передаваемые из родительских компонентов (т. Е. 100), но я не знаю, как отображать родительские данные с помощью ng-модели (т. Е. 100 не отображается в текстовом поле).

Image of of output

Вот мой HTML и AngularJS код: 

var app = angular.module('app', []);

app.component('parentComponent', {
    controller: 'parentController'
})
.controller( 'parentController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 100 };
})

app.component('childComponent', { // CHILD COMPONENT
    bindings: { displayFirst: '=' },
    template: `<div><label>Parent Value: </label>
                 <input type="text" ng-model="$ctrl.object.first">
               </div>`,
    controller: 'childController'
})
.controller('childController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 25 };
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<body>
    <div ng-app="app">
        <div ng-controller="parentController as parent">
            <div ng-controller="childController">
                <child-component displayFirst="parent.object.first">
                </child-component>
                {{ parent.object.first }}
            </div>
        </div>
    </div>
</body>

1 Ответ

0 голосов
/ 13 февраля 2020

В HTML привязка атрибута должна быть в kebab-case : 

<div ng-controller="childController">
    ̶<̶c̶h̶i̶l̶d̶-̶c̶o̶m̶p̶o̶n̶e̶n̶t̶ ̶d̶i̶s̶p̶l̶a̶y̶F̶i̶r̶s̶t̶=̶"̶p̶a̶r̶e̶n̶t̶.̶o̶b̶j̶e̶c̶t̶.̶f̶i̶r̶s̶t̶"̶>̶
    <child-component display-first="parent.object.first">
    </child-component>
    {{ parent.object.first }}
</div>

Дочернему компоненту необходимо использовать привязку в camelCase : 

app.component('childComponent', { // CHILD COMPONENT
    bindings: {
        displayFirst: '='
    },
    template: `
       <div>
         <label>Parent Value: </label>
         ̶<̶i̶n̶p̶u̶t̶ ̶t̶y̶p̶e̶=̶"̶t̶e̶x̶t̶"̶ ̶n̶g̶-̶m̶o̶d̶e̶l̶=̶"̶$̶c̶t̶r̶l̶.̶o̶b̶j̶e̶c̶t̶.̶f̶i̶r̶s̶t̶"̶>̶
         <input type="text" ng-model="$ctrl.displayFirst">
       </div>
    `,
    controller: 'childController'
})

AngularJS компоненты используют изолирующую область. Они не наследуют свойства от родительских областей. Все данные родительской области должны проходить через привязки.

DEMO 

var app = angular.module('app', []);

app.component('parentComponent', {
    controller: 'parentController'
})
.controller( 'parentController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 100 };
})

app.component('childComponent', { // CHILD COMPONENT
    bindings: { displayFirst: '=' },
    template: `<div><label>Parent Value: </label>
                 <input type="text" ng-model="$ctrl.displayFirst">
               </div>`,
    controller: 'childController'
})
.controller('childController', function ($scope) {
    var $ctrl = this;
    $ctrl.object = { first: 25 };
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<body>
    <div ng-app="app">
        <div ng-controller="parentController as parent">
            <div ng-controller="childController">
                <child-component display-first="parent.object.first">
                </child-component>
                {{ parent.object.first }}
            </div>
        </div>
    </div>
</body>
...