How to use ng-bind in HTML param values

Question

I want to use ng-bind directive instead of brackets {{ }} in AngularJS. We have example:

<tag type="{{value1}}">{{value2}}</tag>

Change value2 is easy. We have:

<tag type="{{value1}}" ng-bind="value2"></tag>

How can we change {{value1}} to remove brackets notation?

The first solution by DonJuwe does not working correct for me. Maybe I am doing something wrong. For example in HTML:

<div ng-controller="TestController">
    1. <p style="{{style}}">{{style}}</p>
    2. <p style="getStyle()" ng-bind="style"></p>
    3. <p style="getStyle()" ng-bind="getStyle()"></p>
    <input type="button" ng-click="setStyle()" value="Change Style" />
</div>

in controller:

var module = angular.module('myApp', []);

module.controller('TestController', function ($scope) {
    $scope.style = 'color: rgb(0, 0, 0)';

    $scope.getStyle = function() {
        return $scope.style;
    };

    $scope.setStyle = function() {
        $scope.style = 'color: rgb('+Math.floor(Math.random() * 255)+', 0, 0)';
    }
});

After click on button, all texts (1., 2., 3.) are correct but only line 1 changing color to random red.

Possible duplicate of stackoverflow.com/questions/14952562/… — Dayan
– Dayan, Commented Mar 10, 2015 at 11:46
please tell us why you don't want to use curly brackets. maybe there is another solution for your problem. — DonJuwe
– DonJuwe, Commented Mar 11, 2015 at 12:26
Apparently ng-bind is better and faster than using curly brackets, what with conflict with Twig notation in my case induce me to find other/better way than change AngularJS or Twig interpolation signs to e.g. '{[{' and '}]}' :) — Andrzej Precz
– Andrzej Precz, Commented Mar 11, 2015 at 13:56

DonJuwe · Accepted Answer · 2015-03-10 11:50:34Z

1

You can call a function in your controller which returns the value:

<tag type="getValue()" ng-bind="value2"></tag>

And in your controller:

$scope.getValue = function() {
    return type;
}

answered Mar 10, 2015 at 11:50

DonJuwe

4,5634 gold badges37 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Andrzej Precz Over a year ago

It does not work for me. I added example in question

Andrzej Precz Over a year ago

I thought that maybe my browser is a reason but your site on Firefox 36, Chromium 41, and Chrome 40 on my phone, gives the same result: texts are ok but only first text changes color after click. Could you confirm that in Your browser color changes for all texts every time?

DonJuwe Over a year ago

you are right, it does not work this way. is a directive a suitable way for you?

Andrzej Precz Over a year ago

Thanks, now it works! I will copy Your solution code here in new answer

Andrzej Precz · Accepted Answer · 2015-03-11 13:47:06Z

DonJuwe's resolve:

HTML:

<div ng-controller="TestController">
    1. <p style="{{style}}">{{style}}</p>
    2. <p style="{{style}}" ng-bind="style"></p>
    3. <p my-style ng-bind="style"></p>
    <input type="button" ng-click="setStyle()" value="Change Style" />
</div>

Controller:

var myApp = angular.module('myApp',[]);

myApp.directive('myStyle', function() {
    return {
        scope: {
            color: '=ngBind'
        },
        link: function(scope, elem) {
            elem.attr('style', scope.color);
            scope.$watch('color', function() {
                elem.attr('style', scope.color);
            });
        }
    }
});

function TestController($scope) {    
    $scope.style = 'color: rgb(0, 0, 0)';

    $scope.setStyle = function() {
        $scope.style = 'color: rgb(' + 
            Math.floor(Math.random() * 255) + 
            ', ' + 
            Math.floor(Math.random() * 255) + 
            ', ' + 
            Math.floor(Math.random() * 255) + 
            ')';
    }
}

Thanks a lot!

Collectives™ on Stack Overflow

How to use ng-bind in HTML param values

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related