我正在尝试在 Angular 中注入包含图形的部分模板

Question

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

但是，我想将 $scope.message 作为数据源提供给存储在名为 employees.html 的部分模板中的 D3plus 箱线图。它似乎没有用。也许我犯了一个明显的错误，非常感谢社区的帮助。谢谢！这是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（Angular 模块）：

/// <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>

Answer 1

我不敢说，你的做法全错了。您不应在模板中使用 javascript，然后使用 angular 将值注入该脚本。 Angular 基于 MVC 原则，您在这里混淆了控制器和视图。我强烈建议使用 angular 指令来包装您的 d3 功能：例如：https://github.com/mariohmol/angular-d3plus。这里的简单原则：永远不要在 Angular.

的模板中使用 js 代码

Answer 2

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

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>

我正在尝试在 Angular 中注入包含图形的部分模板

I am trying to inject a partial template in Angular that contains a graph

d3.js

angularjs

angularjs-scope

d3plus