Home / Questions / 70507
Accepted
deluf
Asked: 2020-05-17 12:44:58 +0800 CST 2020-05-17 12:44:58 +0800 CST

binding type in angularjs

  • 772

I have the following code

(function () {
    'use strict';

    angular
        .module('socialChat')
        .component('messageItem', {
            controller: 'MessageItemController',
            bindings: {
                chatUser: '<',
                instance: '<'
            },
            templateUrl: '/js/social-chat/components/message-item/message-item.html'
        });
})();

I do not understand this part

bindings: {
                    chatUser: '<',
                    instance: '<'
                },

what do those < operators mean, and I think there are =,&

angularjs

1 Answers

  1. Best Answer

    Components have a public API for Inputs and Outputs: In AngularJS (Angular 1), by having two-way binding, when '=' is used, changes made to the child are reflected in the parent.

    The inputs (Inputs) have to use < and @, the < denotes one-way binding, that is, a one-way relationship. @ can be used when the input is a string, especially when the value doesn't change. The = is used for a two-way binding, that is, when the value changes in the component, it also changes in the parent.

    bindings: {
  hero: '<',
  comment: '@'
}

    Outputs are done with &, which works as a callback to the component's events:

    bindings: {
  onDelete: '&',
  onUpdate: '&'
}

    Instead of manipulating the information directly, the event on the parent is called.

    <editable-field on-update="$ctrl.update('location', value)"></editable-field><br>

<button ng-click="$ctrl.onDelete({hero: $ctrl.hero})">Delete</button>

    This way the parent component decides what to do with the data.

    ctrl.deleteHero(hero) {
  $http.delete(...).then(function() {
    var idx = ctrl.list.indexOf(hero);
    if (idx >= 0) {
      ctrl.list.splice(idx, 1);
    }
  });
}

    In summary:

    < one-way binding.

    @ is mostly used to pass strings. Supports interpolation {{}}

    = two-way binding

    & is used to pass methods that will later be used in your component.

    In case something is not clear, do not hesitate to ask again.

    I hope it helps you, greetings

    • 2