javascripthtmlangularjsangularjs-ng-modelangularjs-components

How do you use ng-model to take in data from a parent component in AngularJS (version 1.5.5)?

Below is an image of my code's output; I know how to display data passed down from parent components (i.e., 100), but I don't know how to display the parental data via ng-model (i.e., 100 isn't displayed in the text box).

Image of of output

Here's my HTML and AngularJS code:

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>

Solution

  • In the HTML, the attribute binding needs to be in 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>

    The child component needs to use the binding in 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 components use isolate scope. They do not inherit properties from parent scopes. All parent scope data must come through bindings.

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