[英]Need help to add chart js to modal window
here is a diagram made by Chart 这是Chart制作的图表
<div class="diagram">
<canvas id="pie" class="chart chart-pie" width="150" height="150" data="ModalObj.FunctionalTest" labels="labels" colours="Colours">
</canvas>
this is directive 这是指令
.directive('modal', function () {
return {
template: '<ng-include src="getTemplateUrl()"/>',
restrict: 'E',
controller: function($scope) {
//function used on the ng-include to resolve the template
$scope.getTemplateUrl = function() {
return $scope.path;
}
}
}});
besides I have to add the diagram in a modal if template url needs it, not all templates use chart 此外,如果模板网址需要它,我还必须以模式形式添加图,并非所有模板都使用图
DEMO: http://jsfiddle.net/softvar/9cf47fe1/1/ 演示: http : //jsfiddle.net/softvar/9cf47fe1/1/
HTML : HTML :
<div ng-app="myApp">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<elem-modal></elem-modal>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
JS : JS :
var app = angular.module('myApp', []);
app.directive('elemModal', function () {
return {
template: '<p>Test</p><ng-include src="getTemplateUrl()"/>',
restrict: 'E',
controller: function($scope) {
//function used on the ng-include to resolve the template
$scope.getTemplateUrl = function() {
return $scope.path;
}
},
link: function (scope) {
console.log(scope)
}
}});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.