如何将对象传递给 angularjs 中的指令?
How to pass object to a directive in angularjs?
我有一个附加到可调整大小指令的小部件,我在该指令中放置了一个图表,并且希望在调整容器大小时调整该图表的大小。它运行良好,但是当我对不同的图表使用相同的指令时,我需要在指令中传递小部件 ID。
HTML:
<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }"
data-identifier="{{widget.id}}" resizeable ng-click="resize(widget) >
<div ng-if="widget.type === 'All'" class="box" >
<div class="box-header" >
<div class="box-header-btns pull-right" style="top:10px" >
<a title="Data" ng-click="toggleModal(widget)" class="glyphicon glyphicon-list-alt"></i><a>
<a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div ng-controller="highchartCtrl">
<highchart id="widget.id" config="widget.chartConfig" ></highchart>
</div>
</div>
</div>
</div>
指令:
routerApp.directive('resizeable', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).resizable({
resize: function(event, ui) {
var chart = $('#chart1').highcharts();
height = ui.size.height - 100;
width = ui.size.width - 40;
chart.setSize(width, height, doAnimation = true);
jsPlumb.repaint(ui.helper);
},
handles: "all"
});
}
};
});
identifierchange your HTML to following
<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }"
data-identifier="{{widget.id}}" resizeable ng-click="resize(widget) >
...
...
你的指令如下
routerApp.directive('resizeable', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var widgetId = attrs.identifier;
...
...
我有一个附加到可调整大小指令的小部件,我在该指令中放置了一个图表,并且希望在调整容器大小时调整该图表的大小。它运行良好,但是当我对不同的图表使用相同的指令时,我需要在指令中传递小部件 ID。
HTML:
<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }"
data-identifier="{{widget.id}}" resizeable ng-click="resize(widget) >
<div ng-if="widget.type === 'All'" class="box" >
<div class="box-header" >
<div class="box-header-btns pull-right" style="top:10px" >
<a title="Data" ng-click="toggleModal(widget)" class="glyphicon glyphicon-list-alt"></i><a>
<a title="settings" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div ng-controller="highchartCtrl">
<highchart id="widget.id" config="widget.chartConfig" ></highchart>
</div>
</div>
</div>
</div>
指令:
routerApp.directive('resizeable', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).resizable({
resize: function(event, ui) {
var chart = $('#chart1').highcharts();
height = ui.size.height - 100;
width = ui.size.width - 40;
chart.setSize(width, height, doAnimation = true);
jsPlumb.repaint(ui.helper);
},
handles: "all"
});
}
};
});
identifierchange your HTML to following
<div ng-controller="CustomWidgetCtrl" plumb-item class="item" style=" top: 50px; left: 110px; height: 500px; width: 500px; " ng-repeat="widget in dashboard.widgets" ng-style="{ 'left':widget.sizeX, 'top':widget.sizeY }"
data-identifier="{{widget.id}}" resizeable ng-click="resize(widget) >
...
...
你的指令如下
routerApp.directive('resizeable', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var widgetId = attrs.identifier;
...
...