我正在嘗試在包含圖的Angular中注入部分模板

我正在使用部分模板在ASP.NET中創建一個Angular應用程序。當我選擇菜單並單擊「員工」時，控制器調用Web服務並返回正確的JSON數據，並將其存儲在$scope.message中。我在屏幕上顯示$scope.message，並且一切正常。我正在嘗試在包含圖的Angular中注入部分模板

但是，我想將$scope.message作爲數據源提供給存儲在名爲employees.html的部分模板中的D3plus boxplot圖形。它似乎沒有工作。也許我犯了一個明顯的錯誤，並會非常感謝社區的幫助。謝謝！下面是畝代碼：

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>

來源

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，然後使用angular將值注入到該腳本中。 Angular基於MVC原理，您正在混合控制器並在此查看。我強烈建議使用角度指令來包裝您的d3功能：例如：https://github.com/mariohmol/angular-d3plus。這裏的簡單原則：從來沒有，在Angular的模板中有過js代碼。

來源

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中注入部分模板

回答

相關問題