0

我正在使用部分模板在 ASP.NET 中创建一个 Angular 应用程序。当我选择菜单并单击“员工”时，控制器会调用 Web 服务并返回正确的 JSON 数据，并将其存储在$scope.message. 我已经显示$scope.message在屏幕上，一切正常。

但是，我想将$scope.message数据源作为数据源提供给存储在名为employees.html. 它似乎不起作用。也许我犯了一个明显的错误，并且非常感谢社区的帮助。谢谢！这是mu代码：

Webform1.aspx（网络表单）：

...
<body onload="loadPikaday()" data-ng-app="Demo">

    <%-- Header --%>
    <div id="topBanner" class="topBanner">
        <div id="menu" class="menu">
            Report from: &emsp; 
            <input id="startDate" size="6" type="text" data-ng-model="startDate" /> &emsp; To &emsp; 
            <input id="endDate" size="6" type="text" data-ng-model="endDate" />&emsp; 

           <%-- 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（角度模块）：

/// <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（注入的部分模板）：

<!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>
4

2 回答 2

1

这是一个使用指令的简单示例...

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...
            }
        }
    };
});

然后你可以用类似的东西绑定数据

<chart data="data"></chart>
于 2016-09-12T03:54:04.543 回答
1

恐怕你说这一切都错了。您的模板中不应包含 javascript，然后使用 angular 将值注入该脚本。Angular 基于 MVC 原理，您在此处混合了控制器和视图。我强烈建议使用 angular 指令来包装您的 d3 功能：例如：https ://github.com/mariohmol/angular-d3plus 。这里有一个简单的原则：在 Angular 的模板中永远不会有 js 代码。

于 2016-09-12T03:43:36.037 回答