Bind once in Angular 1.5+

Question

I'm using components for my application, and I'm displaying the template only when my promise resolves :

var config = function ($stateProvider) {
    'ngInject';

    $stateProvider.state('test', {
        url: '/',
        views: {
            'root@' : {
                template: '<test></test>'
        },
        resolve: {
            data: function(User) {
                return User.get({
                 hash: 'test',
                 langue: 'en'
                 }).$promise;
            }

        }
    });
};

And my component with one-way data binding :

var userComponent =  {
    bindings: {
        data: "<"
    },
    controller: UserController,
    templateUrl: '/app/users/user.html'
};

But what if I want to just call directly a service to get some data from my component's controller and display it in my html template ? How can I bind it once ?

Is it still considered "good practice" to use bind-once (::) in Angular 1.5+ inside our html templates ?

score 0 · Answer 1 · answered Apr 11 '18 at 10:22

If you use the bindOnce syntax in your component template {{ ::vm.someProp }} Angular will unbind the property once the view is rendered and will not update the view if you change the property in your component controller.

So by using the bindOnce sytax you eliminate an unnecessary bind, which is, I think, 'good practise'. The usage of the bindOnce syntax should not be affected that we now have components in AngularJS

Bind once in Angular 1.5+

1 Answers1