type of binding in angularjs

Question

type of binding in angularjs

Navigation

#1 by (1 votes)

1

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: '<'
                },

which means those operators

angularjs

asked by deluf 16.05.2017 в 22:44

source

1 answer

Help with c ++ program? [closed] Read Excel file from Java Tomcat

score 1 · Accepted Answer

The components have a public API for Inputs and Outputs: In angular, having two-way binding, when using '=', the changes made to the child are reflected in the parent.

The entries (Inputs) have to use < and @, the < denotes one-way binding, that is, one-way relationship. @ can be used when the input is a string, especially when the value does not 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: '@'
}

The 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 is called on the parent.

<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 used more than anything to pass strings. Supports interpolation {{}}

= binding of double meaning

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

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

I hope it serves you, regards