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
Related
I have created three layouts with flex=44,flex=20 and flex=44.
Basically 3 columns on the page.
<div flex="44">
</div>
<div flex="20" class="rightcol">
</div>
<div flex="44" class="rightcol">
<div class="" ui-view>
</div>
</div>
I want to change the flex value or infact merge two flex and make it as one.
Is it possible to achieve from the controllers?
You need to keep the flex-value in the scope of the controller:
app.controller("MyCtrl", function ($scope) {
$scope.flex1 = function () { return 44; };
$scope.flex2 = function () { return 20; };
$scope.flex3 = function () { return 44; };
$scope.showFlex = function (n) {
// your condition whether the flex-ed div should be shown goes in here
return true;
}
});
Your HTML should look like this:
<div ng-controller="MyCtrl">
<div flex="{{flex1()}}" ng-if="showFlex(1)">
</div>
<div flex="{{flex2()}}" ng-if="showFlex(2)" class="rightcol">
</div>
<div flex="{{flex3()}}" ng-if="showFlex(3)" class="rightcol">
<div class="" ui-view>
</div>
</div>
</div>
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
I newly start to use angular.but I have some problem to loading my directive.
I want to load my directive as soon as page loaded.
where I load data-show directive
<div class="row">
<div class="col-md-12">
<article class="row" ng-controller="DataCtrl">
<input type="button" ng-click="getDataList()" >
<h1>Some Content Here</h1>
<ul id="home" bread-crumbs></ul>
<ul class="thumbnails">
<li ng-repeat="data in list" class="col-md-5">
<show-data data="data"/>
</li>
</ul>
</article>
</div>
</div>
showData directive:
app.directive('showData', function () {
return{
restrict: 'E',
replace:true,
templateUrl: 'views/directives/datas.directive.html',
scope: {
data: "="
},
controller:'DataCtrl'
}
})
and template I used in:
<div class="well hoverwell">
<div class="row">
<h2 class="col-md-4">{{data.name}}</h2>
</div>
<div class="row">
<span class="col-md-1">Code:</span>
<span class="col-md-1">{{data.id}}</span>
</div>
<div class="row">
<span class="col-md-1">accountability:</span>
<span class="col-md-1">{{data.parent}}</span>
</div>
<div class="row">
<span class="col-md-1"> :</span>
<span class="col-md-1">{{data.definition}}</span>
</div>
</div>
and my controller
'use strict';
angular.module('app')
.controller('DataCtrl', function ($scope, DataService, $log) {
$scope.getDataList = function () {
var list = DataService.getDataList(1);
list.then(
function (result) {
$log.info(result);
$scope.dataList = result;
}, function (status) {
$log.error(status)
$scope.msg = "error " + status + " has been occur,please report to admin ";
});
};
});
and when I run my app it does not work .
when I watch it in chorome development tools my directive is comment
what is my problem.How can I call this directive as soon as page load.
thx
As you already noticed, you see empty list because your dataList in ng-repeat is not filled yet.
But you have some errors in your code:
First of all - you should never use one controller twice. So you need to create separate controller for your directive.
replace directive parameter is deprecated, better not to use it.
In your DataCtrl you set the dataList variable: $scope.dataList = result;, but in HTML you refer to list variable: <li ng-repeat="data in list" class="col-md-5">.
Maybe that example will help you to figure out with your code.
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
Does anyone have experience using the angular-bootstrap-prettify.js prettyprint directive? I am having problems geting this to work.
Here is my Example: http://jsfiddle.net/mjxNV/
<div ng-app>
<div ng-controller="Ctrl1">
<pre class="prettyprint linenums">
<code class="lang-html">
<div class="container">
<div class="left_column">
<span>Small Text</span>
</div>
<div class="r_ightcolumn2">
<span>Small Text</span>
</div>
</div>
</code>
</pre>
</div>
</div>
My code is displayed but it never goes through the prettyprint tokenization. What am I doing wrong?
I found a sample and modify as your sample:
angular.module('app', [])
.controller('ctrl', function($scope) { });
ap.directive('prettyprint', function() {
return {
restrict: 'C',
link: function postLink(scope, element, attrs) {
element.html(prettyPrintOne(element.html(),'',true));
}
};
});
http://jsfiddle.net/yAv4f/210/