I have build for you a sample directive which uses parameters and jQuery
plugin you tried to use. I hope it will help you to understand directives:
var app = angular.module('yourApp', [*'jQuery.plugins.slideToggle'*]);
....
angular.module('jQuery.plugins.slideToggle', [])
.directive('jqSlideToggle', function(){
return {
restrict: 'A', // it works only as attribute directive
scope: {
selector: '@jqSlideToggle', // jq-slide-toggle attribute mapped to
scope.selector
mode: '@jqSlideToggleMode' // jq-slide-toggle-mode attribute mapped
to scope.mode
},
// this function runs when element that has particular directive attribute
(jq-slide-toggle) is included on site.
link: function(scope, element, attrs, ctrl) {
var mode = scope.mode || 'slow';
$(element).click(function(ev){
$(scope.selector).slideToggle(mode);
});
}
};
});
<div class="col-sm-6" id="chart_0_1">
<div class="panel panel-success">
<div class="panel-heading">
<div class="btn-group" style="float:right;">
<i class="glyphicon glyphicon-minus" id="minimize_0_1"
*jq-slide-toggle="#accordion_0_1"*></i>
</div>
<h3 class="panel-title">Volume de Negócios</h3>
</div>
<div id="accordion_0_1" class="panel-body">
<nvd3-multi-bar-chart data="graficos[0]" id="dataChart_0_1"
height="400" showXAxis="true" reduceXTicks="true" showYAxis="true"
showLegend="true" showControls="true" tooltips="true">
<svg></svg>
</nvd3-multi-bar-chart>
</div>
</div>
</div>
another usage example:
<i class="glyphicon glyphicon-minus" id="minimize_0_1"
*jq-slide-toggle="#accordion_0_1"
jq-slide-toggle-mode="fast"*></i>
On Friday, May 30, 2014 11:03:52 AM UTC+2, Daniel Lopez wrote:
>
>
> Hi Luke,
>
> Thanks for your reply.
> I have been reading about directives but i don't understand how can i use
> my script and convert it to a directive.
> Can you help me?
> Thk
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
