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
Related
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)
I am trying to append some html to the existing container through angular directives. here is the code what i have written for the same.
app.directive("addActivityRow", function($compile){
var template = "Some html template"
return{
restrict: 'A',
link: function(scope, element,attrs,controller){
element.on("click", function() {
console.log("clicked on add row");
element.parent().append(template);
});
}
}
});
here is the html markup
Can any one please help me in correcting the error what i have done ? When i click on anchor tag, nothing happens, nothing logs on console.
I am new to Angular please help ..
Replace this:
href="javascript:void(0);"
with this:
href=""
And use add-activity-row instead of addActivityRow as #PSL mentioned that directive names are used as dash-limited attributes in the view.
I make a simple directed with isolated scope .I read the tutorial of transclude but when I apply it not working as expected .I need to show "dd" and test together how I can show this
here is my plunker
http://plnkr.co/edit/OxmVga7DdkNxzPnfDtGS?p=preview
var app =angular.module('app',[]);
app.directive('newdir',function(){
return {
restrict:"E",
scope:{
fr:'#'
},
replace:true,
transclude: true, // we want to insert custom content inside the directive
template:"<div ng-transclude >{{fr}}</div>"
}
});
The transcluded element gets completely replaced. Replace your template with this to see what is happening:
<div><h3>BEFORE</h3><h1 ng-transclude>MISSING</h1><h3>AFTER</h3>{{fr}}</div>
I'm using the Angular UI Bootstrap directive to show a popover which functions as a dropdown menu. If I specify a HTML template for the content (using the attribute popover-template) I can use clickable links which call a function on my directive to change the value. Now, however, I need to be able to specify options on the fly so I've tried creating the HTML list and passing it to the "popover" attribute in my directive's link function. This works, in that it displays the HTML in the popover correctly, however the links aren't clickable because they're within a ng-bind-html unsafe container. I've tried compiling the HTML string I'm passing to the "popover" attribute but it prints [object Object].
Here's my directive:
MyApp.directive('dropDown', ['$compile', function($compile){
return{
restrict:'EA',
replace:true,
transclude:true,
scope:{
value : '#',
options : '='
},
controller: function($scope, $element) {
$scope.doSelect = function(option, text){
alert(option);
}
},
template: '<div>'+
'<button class="btn btn-dropdown" data-html="true" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click">'+
'{{value}}'+
'<span class="icon-triangle-down"></span></button>' +
'</div>',
link: function (scope, elem, attrs) {
scope.list = '<ul class="dropdown">';
for (opt in scope.options){
if(scope.options.hasOwnProperty(opt)){
scope.list+='<li><a ng-click="doSelect(\''+opt+'\', \''+scope.options[opt]+'\');">'+scope.options[opt]+'</a></li>';
}
}
scope.list += '</ul>';
var but = elem.find("button");
var template = $compile(scope.list)(scope);
//$(but).attr('popover', template); // prints [object Object] instead of compiled html
$(but).attr('popover', scope.list); // prints html not bound to scope and therefore not clickable
$compile(elem.contents())(scope);
}
}}]);
I've created a fiddle to illustrate the problem:
http://jsfiddle.net/CaroD/7B5qB/3/
So: is there any way to compile this HTML so it can interact with the scope, or am I taking a completely wrong approach here?
All suggestions most welcome,
Thanks!
to do not a big directive like that, have you try to use the html-unsafe attribute of the tooltip provider? it gives you the possiblity to put html text into popover and so you surely interact with it.
Please see this jsfiddle: http://jsfiddle.net/viro/DK5pC/3/
What I did looks right compared to the tutorials and replies I've found, so I'm sure I'm overlooking something trivial.
I'm trying to do a directive on a html element, that will create a sibling div to display a message associated with the original element.
for example, for this html :
<input ng-model="inp" tst-msg="message" />
I would create as a sibling element:
<div class="msg">Msg:<span ng-bind="tstMsg"></span></div>
I was hoping that tstMsg in the div's scope would be bound to message in the input's scope.
Here's what the directive looks like :
angular.module('tst', [])
.directive('tstMsg', function(){
var template = "<div class='msg' >Msg:<span ng-bind='tstMsg'></span></div>";
var link = function(scope,element,attrs) {
element.parent().append(template);
console.log("link called");
};
return {
restrict: 'A',
scope: {
tstMsg: '='
},
link: link
};
});
Well that doesn't work and I can't figure out why.
You need to $compile the template you're adding to the DOM. Angular hasn't had a chance to add it's handlers, for instance the ng-bind directive to that part of the dom.
So instead of just adding the element like this:
element.parent().append(template);
These steps will let Angular process your template and then add it.
newe = angular.element(template);
$compile(newe)(scope);
element.parent().append(newe);
Updated fiddle