Component bindings - '<' 와 '=' 옵션 차이 테스트

 

<div ng-controller="MainController as mainCtrl">
    <h2>Parent Component</h2>
    <p>Parent Data: {{ mainCtrl.parentData }}</p>
    <button ng-click="mainCtrl.changeParentData()">Change Parent Data</button>
    <hr>
    <h2>Child Component</h2>
    <example-component parent-data="mainCtrl.parentData"></example-component>
</div>

angular.module('app')
    .controller('MainController', function() {
        this.parentData = 'Initial Parent Data';

        this.changeParentData = function() {
            this.parentData = 'Changed Parent Data';
        };
    })
    .component('exampleComponent', {
        bindings: {
            parentData: '<' // '=' 옵션 변경해서 테스트 해보면 이해됨
        },
        template: `
            <div>
                <p>Parent Data in Child Component: {{$ctrl.parentData}}</p>
                <input type="text" ng-model="$ctrl.parentData">
            </div>
        `,
        controller: function() {
            this.$onInit = function() {
                console.log('Child Component initialized with parentData:', this.parentData);
            };

            this.$onChanges = function(changes) {
                if (changes.parentData) {
                    console.log('parentData changed to:', this.parentData);
                }
            };
        }
    });