Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AngularJS directive: template with scope value (ng-bind-html)

I have such directive:

...
template: function(element, attrs) {
    var htmlTemplate = '<div class="start-it" ng-if="isVisible">\
          <p ng-bind-html="\'{{customDynamicText}}\' | translate"></p>\
        </div>';
    return htmlTemplate;
},
...

(as you can see also i'm using translate plugin)

and there i have a problem: in scope this value is changing, but it doesn't change in directive(

when i'm using attrs-params (sure, if customDynamicText is a static string - all works) - but i have a dynamic variable customDynamicText

How can i use this dynamic variable in directive template with ng-bind-html.

Is it possible?

like image 403
brabertaser19 Avatar asked Feb 11 '16 12:02

brabertaser19


People also ask

Which angular directive is used to binds the value of HTML?

The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.

What is Ng-bind HTML in AngularJS?

The ng-bind-html directive is a secure way of binding content to an HTML element. When you are letting AngularJS write HTML in your application, you should check the HTML for dangerous code. By including the "angular-sanitize.

Does ng-bind bind the application data to HTML tags in AngularJS?

ng-bind directive binds the AngularJS Application data to HTML tags. ng-bind updates the model created by ng-model directive to be displayed in the html tag whenever user input something in the control or updates the html control's data when model data is updated by controller.

What is scope in AngularJS directive?

Scope in a Directive Well, all of the directives have a scope associated with them. This scope object is used for accessing the variables and functions defined in the AngularJS controllers, and the controller and link functions of the directive.


1 Answers

Simply clever... I forgot to remove some quote-chars... So works:

...
<p ng-bind-html="' + attrs.customDynamicText + ' | translate"></p>\
...
like image 57
brabertaser19 Avatar answered Nov 15 '22 20:11

brabertaser19