I'm using angularjs with angular-translate v2.6. I've got a translation that includes a ng-if directive. I've observed that the ng-if is ignored within the text.
I see angular-translate includes translate-compile but adding this declaration to the html like so has no effect:
'Interest.Explanation': 'This is called <a translate-compile
ng-show="interestEnabled"
href="/{{id}}/interest">interest</a>
<span translate-compile
ng-hide="interestEnabled">interest</span>.'
Used in html like so
Any ideas? I'm really scratching my head on this one. (I'm also using ngSanitize if that makes a difference?)
Looks like I had translate-compile inside the wrong tag. Should be on the parent translate tag, not in the string itself.
<p><span translate-compile translate='Interest.Explanation' translate-values={...}</span></p>
Related
I'm trying to write text which includes single and double braces inside a <p> tag. I've tried modifying it to <p ng-non-bindable> but the angular compiler still picks up the braces.
Thanks for all the help!
Use the attribute
ngNonBindable
Possibly duplicate of :
Link
I am in the process of internationalizing a website and have come across a sticking point with angular-translate.
Suppose I have a translationProvider for english supplying the following text:
"example.message": "I need a {{link}} or {{customDirectiveOutput}} to render directives in me"
"link.text": "this link"
I am now trying to get some HTML into those two placeholders by doing something like the following:
<div translate="example.message"
translate-values="{
link: '<a ui-sref=\'stateName\'>{{ \'link.text\' | translate }}</a>'
customDirectiveOutput: '<span my-custom-directive=\'vm.object\'></span>'
}">
</div>
Where ui-sref is from the ui-router and adds an attribute like href="/path/to/my/state", and my-custom-directive places inner html inside the span sort of like this:
<span my-custom-directive='vm.object'>
<span class='foo'>{{vm.object.foo}}</span>
<span class="bar">{{vm.object.bar}}</span>
</span>
The link tag I can "cheat" around by just hard-coding the href onto the a tag and that isn't so bad to duplicate the /path/to/state, though I'd prefer not to.
The custom directive, however, is conditional on its output so I can't just cheat the output into the translate-values
I've tried doing something in the controller for the page like
$scope.value = vm.getValue();
var element = $compile('<span my-custom-directive="value"></span>')($scope);
return element[0].outerHTML;
But this unfortunately creates an infinite digest loop. I feel like this is the right "path", having some JS pre-compile the fragment I need to insert into the translation, but I'm stuck as to how to accomplish that!
How can I insert angular-compiled HTML with directives attached into a translated string?
I am creating a directive in which template I need to use the a scope's variable value as the name of the directive (or alternatively controller) to load.
Say I have a directive widget that has a template called widget.html which looks like:
<div class="widget widget.type" {{widget.type}} ng-controller="widget.type">
<div class="navBar">
<div ng-include="widget.type + '-t.html'"></div>
<i class="fa fa-close"></i>
<hr>
</div>
<div ng-include="widget.type + '-f.html'"></div>
</div>
Now widget.type is not getting evaluated in the first line. It works fine for ng-include. Say widget.type's value is weather. The first line should then be interpolated first to look like (doesn't matter if class attribute, widget.type-attr or ng-controller is interpolated)
<div class="widget" weather>
and then compiled to include the weather directive.
How can I get widget.type interpolated in the template?
Not an option is to use ng-include to load the directive. I need to use one common template for the widget and want to add/override/extend the base directive with additonal functionality/Variables.
If this is not the way to achieve that, is there a way to extend a directive the OOP-way?
See the plunkr
You can only place interpolation expressions in text nodes and attribute values. AngularJS evaluates your template by first turning it into DOM and then invoking directive compilation, etc. If you try to place {{...}} instead of attribute name, you'll just end up with messed-up DOM.
If you really need to replace a whole directive based on $scope variable value, you'll need to create a directive for application of other directives and do some heavy lifting with $compile (you'll have to completely re-compile the template each time the value changes). I'd recommend trying to find other designs solving your situation before attempting this.
For adjusting your template based on element attributes, see this answer.
I have a conditional ng-include directive with a ng-controller associated, but it seems the controller isn't run when the condition is true.
The target is to include the template only when the condition is met and avoid the TypeError: Cannot call method 'insertBefore' of null issue.
For example:
<div ng-include src="myContent.imgList ? 'ui/image-list.html' : null" ng-controller="ImgListSubCtrl">
</div>
When myContent.imgList is filled with data, I expect the image-list.html template to be appended to the DOM and ImgListSubCtrl to be run, but it isn't.
Is this the expected behavior?. I'm using Ionic Framework with Angular 1.2.17.
Thank you.
I already found an explanation, though further comments are welcome.
The following Codepen shows the mentioned behavior and the solution (in Ionic Framework 1.0.0-beta12): http://codepen.io/anon/pen/FnojD?editors=101
The first include doesn't display any count, though the second one displays it correctly.
It seems that when using ng-include along with ng-controller, the controller is only run once, even when the ng-include src expression evaluates to null.
To run it when the template is actually included (when ng-include src isn't null), a solution is to avoid the conditional ng-include and wrap it in a ng-if block, so the whole element is re-created dynamically, as shown in the Codepen above.
In the example from the question:
<div ng-if="myContent.imgList">
<div ng-include src="'ui/image-list.html'" ng-controller="ImgListSubCtrl">
</div>
</div>
I hope it helps.
I'm using twitter bootstrap with a popover and got a AngularJS scoped variable to appear correctly. The below works.
(data-content="{{notifications[0].user}} shared {{notifications[0].user_two}}'s records")
When I add the following
(data-content="<b>{{notifications[0].user}} shared {{notifications[0].user_two}}'s records</b>")
No errors show up, but all of the {{}} no longer render.
So I tried this as a test of sorts
(data-content="<div ng-repeat='item in notifications'>test {{item}} <br/><hr/></div>")
Much like the last example, I see the "test" but not the {{item}}. And the "test" only show s up once, even though the notifications had three elements. When I look at the DOM there's this
<div class="popover-content">
<div ng-repeat="item in notifications">you <br><hr></div>
</div>
I've also tried just creating a directive to iterate through the array and make the output I want, but my attempt to set data-content equal to a directive have been failures. The examples I've found elsewhere I'm confident would work, but I just wanted to confirm before I begin implementing something like this (http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service) or (Html file as content in Bootstrap popover in AngularJS directive) that I'm not missing a straightforward fix to the problem I outlined above that would not require me creating a directive.
Edit:
Plunkr Url http://plnkr.co/edit/VZwax4X6WUxSpUTYUqIA?p=preview
html might be breaking it, try marking it as trusted html using $sce
How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
<button ... data-content="trustedHtml" ...> </button>