我试图注入一个部分模板在Angular包含图形 [英] I am trying to inject a partial template in Angular that contains a graph
问题描述
我在ASP.NET中使用部分模板创建了一个Angular应用程序。当我选择菜单，并单击雇员，控制器调用Web服务并返回正确的JSON数据，并将其存储在 $ scope.message 。我在屏幕上显示 $ scope.message ，一切正常。
I am creating an Angular application in ASP.NET with partial templates. When I select the menu, and click "Employees", a controller calls a webservice and returns the correct JSON data, and I store it in $scope.message. I've displayed $scope.message on the screen, and everything works.
但是， $ scope.message 作为存储在名为 employees.html 的部分模板中的D3plus箱图的数据源。它似乎没有工作。也许我犯了一个明显的错误，将非常感谢社区的帮助。谢谢！这里是mu代码：
However, I want to feed $scope.message as data source to a D3plus boxplot graph stored in a partial template called employees.html. It does not seem to be working. Perhaps I am making an obvious mistake and would greatly appreciate the community's help. Thank you! Here is mu code:
Webform1.aspx（webform）：
Webform1.aspx (webform):
...
<body onload="loadPikaday()" data-ng-app="Demo">
<%-- Header --%>
<div id="topBanner" class="topBanner">
<div id="menu" class="menu">
Report from:  
<input id="startDate" size="6" type="text" data-ng-model="startDate" />   To  
<input id="endDate" size="6" type="text" data-ng-model="endDate" /> 
<%-- Dropdown menu --%>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">MENU</button>
<div id="myDropdown" class="dropdown-content">
<a href="#/cases">Cases</a>
<a href="#/protocols">Protocols</a>
<a href="#/employees">Employees</a>
</div>
</div>
</div>
</div>
<%-- Where html is injected--%>
<div data-ng-view=""></div>
</body>
...
myScript.js（Angular模块）：
myScript.js (Angular module):
/// <reference path="angular.min.js" />
var app = angular.module("Demo", ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/cases', { // Root: initialize with cases
templateUrl: 'templates/cases.html',
controller: 'casesController'
})
.when('/protocols', { // Root: initialize with cases
templateUrl: 'templates/protocols.html',
controller: 'protocolsController'
})
.when('/employees', {
templateUrl: 'templates/employees.html',
controller: 'employeesController'
})
})
.controller('casesController', function ($scope) {
$scope.message = "Cases!";
})
.controller('protocolsController', function ($scope) {
$scope.message = "This is the protocols page!";
})
.controller('employeesController', function ($scope, $http) {
$http.get('dataWebService.asmx/getTotalForDateIntervalEmployees', {
params: { startDate: '2015-01-01', endDate: '2016-08-01' }
})
.then(function (response) {
$scope.message = response.data;
})
});
employees.html（注入的部分范本）：
employees.html (injected partial template):
<!doctype html>
<meta charset="utf-8">
<script src="//d3plus.org/js/d3.js"></script>
<script src="//d3plus.org/js/d3plus.js"></script>
<div id="viz"></div>
<script>
var data = {{message}};
var visualization = d3plus.viz()
.container("#viz")
.data(data)
.type("box")
.id("name")
.x("building")
.y("total")
.time(false)
.ui([{
"label": "Visualization Type",
"method": "type",
"value": ["scatter", "box"]
}])
.draw()
</script>
推荐答案
这里是一个使用指令的简单示例...
Here is a simple example using a directive...
var app = angular.module('app', []);
app.controller('AppCtrl', function($scope, $http) {
$scope.data = [];
$http.get('/data').then(function(data) {
$scope.data = data.data;
});
});
app.directive('chart', function() {
return {
restrict: 'EA',
scope: {
data: '=',
},
link: function(scope, elem, atts) {
var svg = d3.select(elem[0]).append('svg'),
chart = svg.append('g');
scope.$watch('data', function(data) {
chart.selectAll('*').remove();
if (data.length) {
updateChartData(data);
}
});
function updateChartData(data) {
// add all your d3 code here...
}
}
};
});
然后您可以将数据绑定到
Then you can bind the data with something like
<chart data="data"></chart>
这篇关于我试图注入一个部分模板在Angular包含图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
