Need equivalent syntax using ng-bind

Question

How can replace the {{eachTab.tabName}} with ng-bind in the following code?

<tabset>
    <tab ng-repeat="eachTab in rowTabs" heading="{{eachTab.tabName}}"
         select="createRecsforeachTab(dSet, eachTab)">
    </tab>
</tabset>

2nd one, if you are using ng-bind-html don't forget to include ngSanitize. — Ataur Rahim Chowdhury, May 12 '15 at 12:49
This question makes little sense. `ng-bind` is used to bind the text content of an element to interpolated expression. It was never used or meant to be used for an attribute. What is wrong with `heading="{{expr}}"`? — New Dev, May 14 '15 at 06:21
@NewDev, you might be aware of angularjs initial flickering issue with {{ }} syntax, particularly when the to be loaded Html content is too large. To avoid that few developers are suggesting to use ng-bind instead {{ }} as one of the solutions. I hope it answered your question. — smart987, May 15 '15 at 03:54
@mnkb, yes, but that is only applicable for text content, not for attributes. Attributes would not flicker — New Dev, May 15 '15 at 04:07
Really!!!. But when I use, , I am getting flickering with tab names appearance, so I am on the way of fixing it using ng-bind. Each of my tab loads 4 to 5 charts (like line charts/bar charts, etc) or some complex tables and my tab names are getting effected with this flickering problem. — smart987, May 15 '15 at 07:14

Alex Pan · Answer 1 · 2015-05-12T12:23:45.397

0

Try moving the ng-repeat into the tabset scope like so:

<tabset ng-repeat="eachTab in rowTabs">
    <tab heading="{{eachTab.tabName}}" ng-bind-html="{{eachTab.tabName}}" select="createRecsforeachTab(dSet, eachTab)"> </tab>
</tabset>

edited May 12 '15 at 12:23

answered May 12 '15 at 11:59

Alex Pan

4,341
8
34
45

score 0 · Answer 2 · edited May 23 '17 at 11:44

You have answered! ngBind

The following code is from this post by @badsyntax

angular.module("template/tabs/tab.html").run(["$templateCache", function($templateCache) {
  $templateCache.put("template/tabs/tab.html",
    "<li ng-class=\"{active: active, disabled: disabled}\">\n" +
    "  <a ng-click=\"select()\" tab-heading-transclude ng-bind-html=\"heading\"></a>\n" +
    "</li>\n" +
    "");
}]);

Need equivalent syntax using ng-bind

2 Answers2