Я пытаюсь ввести частичный шаблон в Angular, который содержит график

Я создаю Угловое приложение в ASP.NET с частичными шаблонами. Когда я выбираю меню и нажимаю «Сотрудники», контроллер вызывает веб-сервис и возвращает правильные данные JSON, и я храню его в $scope.message. Я отобразил на экране $scope.message, и все работает.Я пытаюсь ввести частичный шаблон в Angular, который содержит график

Тем не менее, я хочу подать $scope.message в качестве источника данных в график квадратного ящика D3plus, хранящийся в частичном шаблоне, который называется employees.html. Кажется, он не работает. Возможно, я совершаю очевидную ошибку и очень ценю помощь сообщества. Спасибо! Вот му код:

WebForm1.aspx (Webform):

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

источник

2016-09-12 Johnathan

Вот простой пример использования директивы ...

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-12 03:54:04 Rob

Большое спасибо за вашу помощь !!! Я пытаюсь изучить AngularJS, но застрял там долгое время! Я действительно ценю ваше время! : D – Johnathan

Вы все это ошибаетесь, я боюсь сказать. У вас не должно быть javascript в вашем шаблоне, а затем использовать угловые значения для ввода значений в этот скрипт. Угловая основана на принципе MVC, и вы смешиваете контроллер и смотрите здесь. Я настоятельно рекомендую использовать угловую директиву, чтобы обернуть функциональность d3: например, это: https://github.com/mariohmol/angular-d3plus. Простой принцип здесь: никогда, никогда не имеет js-кода в шаблонах в Angular.

источник

2016-09-12 03:43:36

Большое спасибо за вашу помощь. Я новичок в AngularJS, поэтому я очень благодарен вам за объяснение моей очевидной ошибки. Это звучит банально, но сегодня я узнал что-то важное! : D – Johnathan

Итак, если я правильно понимаю, контроллер используется для привязки данных, а директива используется для указания «как построить новую диаграмму», правильно? – Johnathan

Привет! Он отлично работает, за исключением того, что мои ящики очень слабы. Мне было интересно, можете ли вы посмотреть мой новый пост: http://stackoverflow.com/questions/39455342/d3plus-boxplots-dont-appear-when-i-use-angulars-directive-angular-d3plus – Johnathan

Я пытаюсь ввести частичный шаблон в Angular, который содержит график

ответ

Смежные вопросы