I would like to surround and input with a wrapper which contains multiple divs. I would want the input to be placed inside of the div called "my-content". I'm using a directive to achieve this, but it's not being placed inside the wrapper.
These are the templates I tried:
This doesn't work
<div class="wrapper" >
<div class="left-side" > </div>
<div class="middle">
<div class="top-side"> </div>
<div class="my-content" ng-transclude ></div>
<div class="bottom-side"> </div>
</div>
<div class="right-side"> </div>
</div>
But this works
<div class="wrapper" >
<div class="left-side" > </div>
<div class="middle">
<div class="top-side"> </div>
<input class="my-content" ng-transclude />
<div class="bottom-side"> </div>
</div>
<div class="right-side"> </div>
</div>
Directive is defined as such:
app.directive('wrapMe', function(){
return {
restrict: "A",
templateUrl: 'template.html',
transclude: true,
replace: true
};
});
So to reiterate, I would like whatever has the wrap-me directive to be placed inside the div with 'my-content' class and ng-transclude. Am I missing something here?
Plunker link: http://plnkr.co/edit/oQtWNCBBuc61bRwzDjHP?p=preview
You're almost there. Just change transclude option to element and you're done. Basically you want both the input element and its contents to be transcluded. The previous option (transclude: true) only transcludes the contents, which is empty, that's why it didn't work.
app.directive('wrapMe', function(){
return {
restrict: "A",
templateUrl: 'template.html',
transclude: 'element',
replace: true
};
});
Updated plunkr: http://plnkr.co/edit/IX0ELKR4wKOPtt2vO6FB?p=preview
Related
I'm writing a submenu directive, but I'm unable to use transclude properly for some reason. I've read and watched some videos, but it still doesn't work on my app and I can't figure out why.
Here's how I call the directive:
<my-submenu>
<div ng-click="test()">Test</div>
<div ng-click="test2()">Test 2</div>
<div ng-click="test3(id, type)">Test 3</div>
<div ui-sref="test ({id: id})">Test 4</div>
</my-submenu>
and the directive js is:
{
link: linkFunction,
restrict: 'E',
replace: true,
transclude: true,
templateUrl: './directives/submenu.tpl.html'
}
and the directive template is:
<div>
<!-- Menu Icon -->
<div class="icon ion-plus"></div>
<!-- Menu -->
<div>
<div ng-transclude></div>
</div>
</div>
Now, I though that using transclude and telling the directive template where to transclude, I should be able to add content to the directive template as well as content where I call if from my parent, and have it compiled togheter, but it is not doing that.
The resulting compiled code is the following:
<my-submenu>
<div>
<div ng-click="test()">Test</li>
<div ng-click="test2()">Test 2</li>
<div ng-click="test3(id, type)">Test 3</li>
<div ui-sref="test ({id: id})">Test 4</li>
</ul>
</my-submenu>
and as you can see, the Icon before the transclude is gone and not displayed at all. Why?
What am I doing wrong with the transclude? thanks
I do this with the same way as your and it works properly..
My directive:
myApp.directive('toolbarItem', function() {
return {
transclude:true,
restrict: 'E',
scope: {},
link: function(scope, element, attrs) {
},
templateUrl:'/toolbarItem.html'
}
});
And my template:
<div class="item" ng-transclude></div>
I am using same divs in my view but inside of divs are changing.So I want to make it in a directive. What is the way for this?
Example;
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<label....>
</div>
</div>
</div>
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<select....>
</div>
</div>
</div>
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
<textArea....>
</div>
</div>
</div>
So i want to make this part as a directive ;
<div id="firstDiv">
<div id="secondDiv">
<div id="thirdDiv">
</div>
</div>
</div>
Can you help ?
Use this:
<my-wrapper>
Your content here
</my-wrapper>
And script (UPDATED: Load html file instead inline html):
module.directive('myWrapper', function ($http, $compile) {
var linker = function (scope, element, attrs) {
$http.get('wrapper.html').success(function (data) {
element.replaceWith($compile(data)(scope));
});
};
return {
restrict: 'E',
link: linker
};
});
JSFiddle
For angular I'm using a Directive to Toggle Class:
app.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
element.toggleClass(attrs.toggleClass);
});
}
};
});
And the HTML I have multiple times:
<div class="tab" toggle-class="open">
<div class="title">
<p>Tab title</p>
</div>
<div class="content">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
It works, but when I click somewhere in the .content-element, it also toggles. But I want it to stay active. Not toggle-ing back to the close-state.
Is there an easy way to let it work like this:
- click on .title
- toggle .content (by adding .open to the .tab-element.
Added .parent()
app.directive('toggleClass', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
element.bind('click', function() {
element.parent().toggleClass(attrs.toggleClass);
});
}
};
});
And toggle-class to the title element.
<div class="tab">
<div class="title" toggle-class="open">
<p>Tab title</p>
</div>
<div class="content">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
I just consider that you don't need a custom directive to do this kind of things.
Here is two exemples, first one with the angular way to toggleClass, second one in a global angular way.
Both will meet your needs covered by this directive.
First One :
<div ng-repeat="aTab in [{},{},{},{},{}]" class="tab" ng-class="{'open':isOpen}">
<div class="title" ng-click="isOpen = !isOpen">
<p>Tab title</p>
</div>
<div class="content">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
with this CSS
.content {
display:none;
}
.open .content {
display:block;
}
Second one :
<div ng-repeat="aTab in [{},{},{},{},{}]" class="tab">
<div class="title" ng-click="aTab.show = !aTab.show">
<p>Tab title</p>
</div>
<div class="content2" ng-show="aTab.show">
<!-- This element hidden by default, needs toggle -->
<p>Foobar</p>
</div>
</div>
You can see theses exemples in this plunker
Hope it helped
EDIT : Updated the exemples and plunker to show how it works with an ng-repeat
HI I need call two controllers from same div i.e div id="div1" cntr1 and cntr2,Is it possible to do?
<div id="div1" ng-controller="ctrl1">
</div>
Please help me out ..
nested controller - you can access ctrl1's field and function in ctrl2 also .You can use $parent.
<div ng-controller="ctrl1">
<div ng-controller="ctrl2">
</div>
</div>
Define a directive that has the desired controller:
angular.module(...).directive('ctrl2', function() {
return {
restrict: 'A',
scope: false,
controller: 'ctrl2'
};
});
Use as:
<div id="div1" ng-controller="ctrl1" ctrl2></div>
I am using Bootstrap UI's accordion directive. This uses transclusion under the hood. I have some logic that needs repeated, so I am trying to create a directive that wraps the accordian, which also uses transclusion.
<div>
<div accordion>
<div accordion-group is-open="isOpen">
<div accordion-heading>
<span class="glyphicon" ng-class="{'glyphicon-minus-sign': isOpen, 'glyphicon-plus-sign': !isOpen}"></span>
<strong>{{headerTitle}}</strong>
</div>
<div ng-transclude></div>
</div>
</div>
</div>
Here is the JavaScript:
application.directive('collapsePanel', ['baseUrl', function (baseUrl) {
return {
restrict: 'A',
templateUrl: baseUrl + 'content/templates/collapse_panel.html',
replace: true,
transclude: true,
scope: {
headerTitle: '#'
},
controller: ['$scope', function ($scope) {
$scope.isOpen = false;
}]
};
}]);
It should be as simple to use as:
<div collapse-panel header-title="Title">
{{scopeVariable}}
</div>
Assuming scopeVariable is in my controller, I would think its value would appear. From what I can tell, the scope belongs to the collapse-panel rather than the outer scope. It is almost like having nested transclusion directives is causing my problem.
Is there a trick to nesting transclusions like this?