我正在尝试在 Angular 中注入一个包含图形的部分模板 - IT屋-程序员软件开发技术分享社区
首页 其他开发 我正在尝试在 Angular 中注入一个包含图形的部分模板
我正在尝试在 Angular 中注入一个包含图形的部分模板
[英] I am trying to inject a partial template in Angular that contains a graph
本文介绍了我正在尝试在 Angular 中注入一个包含图形的部分模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用部分模板在 ASP.NET 中创建一个 Angular 应用程序.当我选择菜单并单击员工"时，控制器将调用 Web 服务并返回正确的 JSON 数据，并将其存储在 $scope.message 中.我已经在屏幕上显示了 $scope.message，一切正常.
但是，我想将 $scope.message 作为数据源提供给存储在名为 employees.html 的部分模板中的 D3plus 箱线图.它似乎不起作用.也许我犯了一个明显的错误，非常感谢社区的帮助.谢谢！这是mu代码:
Webform1.aspx(网络表单):
<代码>...<body onload="loadPikaday()" data-ng-app="Demo"><%-- 标题--%><div id="topBanner" class="topBanner"><div id="menu" class="menu">报告来自: <input id="startDate" size="6" type="text" data-ng-model="startDate"/> 到  <input id="endDate" size="6" type="text" data-ng-model="endDate"/> <%--下拉菜单--%><div class="下拉菜单"><button onclick="myFunction()" class="dropbtn">MENU</button><div id="myDropdown" class="dropdown-content"><a href="#/cases">案例</a><a href="#/protocols">协议</a><a href="#/employees">员工</a>
<%-- html被注入的地方--%><div data-ng-view=""></div>
...myScript.js(Angular 模块):
///employees.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><脚本>var data = {{message}};var 可视化 = d3plus.viz().container("#viz").data(数据).type("盒子").id("姓名").x(建筑").y("总计").time(假).ui([{"label": "可视化类型","方法": "类型",值":[分散"，框"]}]).画()
解决方案
这是一个使用指令的简单示例...
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('图表', function() {返回 {限制:'EA'，范围: {数据:'='，},链接:功能(范围，元素，atts){var svg = d3.select(elem[0]).append('svg'),chart = svg.append('g');scope.$watch('data', function(data) {chart.selectAll('*').remove();如果(数据长度){更新图表数据(数据)；}});函数更新图表数据(数据){//在此处添加所有 d3 代码...}}};});然后你可以用类似的东西绑定数据
<chart data="data"></chart>
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.
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):
...
<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 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 (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屋！
查看全文
