I want this piece of code
<test data="myObject"></test>
to be rendered as
<p>raw html code that is stored inside myObject.html</p>
My directive
module.directive('test', function() {
return {
restrict: 'E',
template: '<p ng-bind-html="__what_to_do_here__?"></p>',
scope: {
// This object has a html propery which contains raw html.
data: '='
}
};
});
How can i pass the raw html variable to the ngBindHtml directive in my template?
Did you include ngSanitize? I think it is required to be able to render html from a variable.
You can find more information about ng-bind-html here: https://docs.angularjs.org/api/ng/directive/ngBindHtml (will also link you to ngSanitize)
Related
I am trying to make an angular directive that renders dynamic content urls based on an attribute placed on the directive. Example:
Directive:
angular
.module('myModule')
.directive('myContent', directive);
function directive() {
return {
replace: true,
templateUrl: function (elem, attrs) {
return attrs.contentUrl;
}
};
}
HTML:
<div my-content content-url="url/to/my-content.html"></div>
However what I would like is for the content-url attribute to be populated by a string from the controller. So let's say the controller is using the "controllerAs" syntax with the name "home", I would like the html to read:
<div my-content content-url="{{home.myContent.url}}"></div>
However within the directive's templateUrl function, the contentUrl attribute is being sent literally as "{{home.myContent.url}}". How can I get this value to evaluate before running the templateUrl function? Or, is there a better way to have simple, dynamic content available from a directive?
The answer is provided by #crhistian-ramirez:
Just use ng-include
<div ng-include="vm.myContent.url"></div>
I have a custom directive like below. In it I'd like to insert html from a partial:
.directive('myDirective', function($parse){
return {
restrict: 'A',
scope: { foo: '=' },
link: function(scope, element, attrs){
//add children to element[0] using html from partials/content.html
//...
}
});
Google/Stack doesn't reveal much, is there a way to do this or am I not meant to use directives in this way?
There are 3 possible things that you can do
You could either make $templateRequest to the html page, which internally make an ajax to fetch html & then put that html inside the $templateCache.
Code
$templateRequest('mypath.html').then(function(res){
//inside you could have html content in res.data;
var html = res.data;
})
You could put that html content inside $templateCache service inside run block & then use it whenever required using $templateCache.get('templateName')
Code
app.run(function($templateCache){
$templateCache.put('mytemplate.html', '<div>My HTML</div>')
})
//inside directive do below thing
var html = $templateCache.get('mytemplate.html');
Place the html content inside script block which will have type="text/ng-template" which will again force this template to put inside the $templateCache service. and this template will make you available instantly.
Markup
<script type="text/ng-template">
<div>My Content<div>
</script>
//inside directive you need to access it from $templateCache.
var html = $templateCache.get('mytemplate.html');
I want to hide the Directive name markup from my html
Right now I am doing this
<option-found-address-display></option-found-address-display>
But when this renders/compiles I just want to show the contents of the directive. Not the actual <option-found-address-display>and then my content within.
I am pretty sure I saw a way how to hide this but can't remember
app.directive('optionFoundAddressDisplay', function() {
return {
restrict: 'E',
template: '<div>your content</div>',
replace:true
}
});
will hide the directive name markup from the html.
Replace:true does the trick.
For more about replace:true
How can I assign a string to the template property of an angular.js directive, by passing the string as an attribute from any element that would be consuming that directive name?
For example:
In the markup:
...
Then in the angular directive:
angular.module('TestModule', [])
.directive('myCustomDirective', function(){
return {
restrict: 'AE',
template: 'my_template'
};
});
I have tried all the strategies to bind to a directive, by the use of
'#', '=' and '&' but they only help to pass values into the template but not passing
the template itself.
Any help would be appreciated please.
As suggested by New Dev, either you can compile and add your template dynamically during link function. Or you can define a fixed directive template and use ng-include to variate inner content: Like this:
template: "<div ng-include='templateToUse'></div>",
scope: {templateToUse:'='}
Now if you pass different templateToUse from where you define the directive.
<div my-directive template-to-use='determineTemplate()'></div>
I've got an AngularJS directive that is not placing a string (intended to be a relative path to an image) inside one of the attributes in an HTML element and I'm at a loss as to why.
My item looks like the following:
item : {
name: 'Test Name',
link: 'Assets/logo.png'
}
If I step through the javascript, I'm correctly receiving the link from the webservice, so that's not the problem as my Angular controller properly shows the link in the $scope.
The following is what I have in the template for that controller that I'm having the problem with:
<my-directive name="{{item.name}}" link="{{item.link}}"></my-directive>
Here's the javascript for my directive:
angular.module('myModule').directive('myDirective', function() {
return {
restrict: 'E',
replace: true,
templateUrl: '/RelativePathToTemplateFile.html',
scope: {},
link: function($scope, element, attr, model) {
$scope.name = attr.name;
$scope.link = attr.link;
}
}
})
When I look at the rendered HTML, I have the following:
<div name="Test Name" link></div>
What's going on? How can I pass this link in properly?
Directive scope binding technique can resolve this issue. Try to use "#" to bind the directive property to the evaluated DOM attribute.
HTML
<div ng-controller="myCtrl">
<my-directive my-name="{{item.name}}" my-link="{{item.link}}"></my-directive>
</div>
Javascript
angular.module("myApp",[])
.controller("myCtrl",function($scope){
$scope.item = {
name:"Test Name",
link:"Assets/logo.png"
};
})
.directive("myDirective",function(){
return {
restrict: "E",
template: '<div name="{{myName}}" link="{{myLink}}">{{myName}}</div>',
replace: true,
scope:{
myName:"#",
myLink:"#"
}
};
});
Here is a jsFiddle DEMO, you could refer to it.
From the documentation:
function link(scope, element, attrs) { ... } where:
* scope is an Angular scope object.
* element is the jqLite-wrapped element that this directive matches.
* attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
so it's "attrs", not "attr"
try:
<myDirective name="item.name" link="item.link"></myDirective>
It will be better :)