What is the correct way to bind an object in the 'bindings' using $compile in Angular.js 1.0?

Question

What is the correct way to bind an object in the 'bindings' using $compile in Angular.js 1.0?

I am looking to dynamically compile a component and insert it into a specific DOM element, which is also dynamically created by a third-party library. To achieve this, I am utilizing the $compile and $scope.

https://jsbin.com/gutekat/edit?html,js,console,output

// ListController $postLink life cycle hook

function $postLink() {
  ...

  $timeout(function () {
    ctrl.items.splice(0, 1);
    $log.debug('First item of array is removed');
    $log.debug(ctrl.items);
  }, 2000);
}

However, the $onChanges life cycle hook in the ListItemController is not being executed.

// ListItemController $onChanges life cycle hook

function $onChanges(changes) {
  if (!changes.item.isFirstChange()) {
    $log.debug(changes);  // Not executed
  }
}

I suspect that using angular.merge to pass the item before initializing the ListItemController controller instance is causing this issue.

var itemScope = $scope.$new(true, $scope);
itemScope = angular.merge(itemScope, {
  $ctrl: {
    item: item
  }
});

javascript angularjs angularjs-directive angularjs-scope angularjs-components

Answer 1

Answer №1

I made some adjustments to your code to illustrate the concept of one-way binding.

angular.module('app', [
    'list.component',
    'list-item.component'
]);

/**
 * list.component
 */
angular
    .module('list.component', [])
    .component('list', {
        controller: ListController,
        template: '<div id="list"></div>'
    });

ListController.$inject = ['$compile', '$document', '$log', '$scope', '$timeout'];
function ListController($compile, $document, $log, $scope, $timeout) {
    var ctrl = this;

    ctrl.$onInit = $onInit;
    ctrl.$postLink = $postLink;

    function $onInit() {
        ctrl.items = [
            {
                id: 0,
                value: 'a'
            },
            {
                id: 1,
                value: 'b'
            },
            {
                id: 2,
                value: 'c'
            }
        ];
    }

    function $postLink() {
        var index = 0;

        var iElements = ctrl.items.map(function (item) {
            var template = '<list-item item="$ctrl.items[' + (index) + ']"></list-item>';
            index++;

            return $compile(template)($scope.$new(false));
        });

        var listDOM = $document[0].getElementById('list');
        var jqListDOM = angular.element(listDOM);

        iElements.forEach(function (iElement) {
            jqListDOM.append(iElement);
        });

        $timeout(function () {
            ctrl.items[0] = { id: 3, value: 'ss' };
            ctrl.items[1].value = 's';
            ctrl.items[2].value = 's';
        }, 2000);
    }
}

/**
 * list-item.component
 */
angular
    .module('list-item.component', [])
    .component('listItem', {
        bindings: {
            item: '<'
        },
        controller: ListItemController,
        template: '<div class="listItem">{{ $ctrl.item.value }}</div>'
    });

ListItemController.$inject = ['$log'];
function ListItemController($log) {
    var ctrl = this;

    ctrl.$onChanges = $onChanges;

    function $onChanges(changes) {
        if (!changes.item.isFirstChange()) {
            $log.debug(changes);    // Not executed      
        }
    }
}

Answer 2

I made some adjustments to your code to illustrate the concept of one-way binding.

angular.module('app', [
    'list.component',
    'list-item.component'
]);

/**
 * list.component
 */
angular
    .module('list.component', [])
    .component('list', {
        controller: ListController,
        template: '<div id="list"></div>'
    });

ListController.$inject = ['$compile', '$document', '$log', '$scope', '$timeout'];
function ListController($compile, $document, $log, $scope, $timeout) {
    var ctrl = this;

    ctrl.$onInit = $onInit;
    ctrl.$postLink = $postLink;

    function $onInit() {
        ctrl.items = [
            {
                id: 0,
                value: 'a'
            },
            {
                id: 1,
                value: 'b'
            },
            {
                id: 2,
                value: 'c'
            }
        ];
    }

    function $postLink() {
        var index = 0;

        var iElements = ctrl.items.map(function (item) {
            var template = '<list-item item="$ctrl.items[' + (index) + ']"></list-item>';
            index++;

            return $compile(template)($scope.$new(false));
        });

        var listDOM = $document[0].getElementById('list');
        var jqListDOM = angular.element(listDOM);

        iElements.forEach(function (iElement) {
            jqListDOM.append(iElement);
        });

        $timeout(function () {
            ctrl.items[0] = { id: 3, value: 'ss' };
            ctrl.items[1].value = 's';
            ctrl.items[2].value = 's';
        }, 2000);
    }
}

/**
 * list-item.component
 */
angular
    .module('list-item.component', [])
    .component('listItem', {
        bindings: {
            item: '<'
        },
        controller: ListItemController,
        template: '<div class="listItem">{{ $ctrl.item.value }}</div>'
    });

ListItemController.$inject = ['$log'];
function ListItemController($log) {
    var ctrl = this;

    ctrl.$onChanges = $onChanges;

    function $onChanges(changes) {
        if (!changes.item.isFirstChange()) {
            $log.debug(changes);    // Not executed      
        }
    }
}

What is the correct way to bind an object in the 'bindings' using $compile in Angular.js 1.0?

Answer №1

Similar questions

Retrieving a value attribute from the isolated controller of a directive

Struggling to delete a table row using jquery

What is the method for extracting the value of a JavaScript variable using the .Net framework or C# programming language?

Feeling trapped by the endless stream of AJAX calls

Experience the dynamic bouncing marker feature in Next.js React-Leaflet with the powerful tool Leaflet.SmoothMarkerB

Methods to maintain the select2 dropdown event open while interacting with another select2 dropdown

Safari iOS 8 experiencing issues with loading WebGL image textures

Having trouble getting AngularJs ng-repeat to function properly when using multiple items in ng-init?

The @click directive in vuex does not function properly within the Vue component

Adding a backslash in Angular: Tips and Tricks

Stop const expressions from being widened by type annotation

Can data be presented in AngularJS without the use of scope variables?

C# variable value not being retrieved by jQuery

Checking for multiple click events in jQuery

Limiting the x-axis drag function in a grouped bar chart using D3.js

The ng-repeat directive doesn't render any content on the page

Alert: A notification appears when executing Karma on grunt stating that 'The API interface has been updated'

Facing delays in receiving responses for inner loop in node.js

Locate the word or phrase without a comma

Adding a Fictitious Pair to a JavaScript Object Literal