添加指令編程方式使用$編譯和範圍傳遞數據，

Question

我創建了一個名爲指令NG-圖如下：

(function() { 
'use strict'; 
angular 
    .module('app') 
    .directive('ngChart', ['$http', '$compile', 'DashboardService', '$q', '$timeout', '$modal', 'FlashService', function ($http, $compile, DashboardService, $q, $timeout, $modal, FlashService) { 

     return { 
      restrict: 'E', 
      scope: 
      { 
       chartObj: "=?" 
      }, 
      template: "<div style='position:relative;'>" + 
       "<span style='position:absolute;top:0px;right: 27px;' id='spanMaxRestore' title='Maximize' ng-click='btnResizeClick()'><img style='width:18px;' src='../Dashboard/Images/bakupRestore.png' alt='Restore'/></span>" + 
       "<span style='position:absolute;top:0px;right: 50px;' title='Configure' ng-click='btnSettingClick()'><img style='width:18px;' src='../Dashboard/Images/setting.png' alt='Configure'/></span>" + 
       "<span style='position:absolute;top:0px;right:0px;' title='Close' onclick='this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode); return false;'><img src='/precisioncare/Dashboard/Images/dialog_close.png' alt='close chart'/></span><br/>" + 
       "<div style='position:absolute; width:400px;'><img src='data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=='/></div>" + 
       "</div>", 

      link: function (scope, iElement, iAttrs, ctrl) 
      { 
       scope.iElement = iElement; 
       $(iElement).on('resize', function() { 
        scope.resize(iElement); 
       }); 

       $(iElement).resizable(); 
       $(iElement).draggable(); 

       alert(scope.chartObj.dashUserElementId); 

       scope.$watch('chartObj', function (chartData) { 

        if (chartData != "" && chartData != undefined) { 
         $timeout(function() { 

          var elem_id = scope.chartObj.dashUserElementId; //Element id. 
          var elem_data_source = scope.chartObj.dashUserElementDataSource; //Data query to retrive the data from database. 
          var displaytypeid = scope.chartObj.dashUserElementConfigDisplayTypeId; // Display type id of current element. 


          var divContainer = iElement.find('div'); 
          scope.containerToDisplay = divContainer[1]; 
          var dataObject = JSON.stringify({ "element_id": elem_id, "dataquery": elem_data_source, "Configurable": scope.chartObj.dashuserelement_date_range_origin }); 
          //Return data series, Query parameter, and column name. 
          DashboardService.drawDashboardElement("getElementDataQuery", dataObject).then(function (response) { 
           var resultD = JSON.parse(response.d); 
           //If result is not empty then call drawChart method with passing parameter ResultD , displaytypeId and container to display. 
           if (resultD != undefined && resultD != "") 
            scope.drawChart(resultD, displaytypeid, scope.containerToDisplay, elem_id); 
          }, 
          function (error) { 
           // promise rejected, could log the error with: 
           console.log('error', error); 
          }); 

         }, 0); 
        } 

       }); 

      }, 
      controller: function ($scope) { 

       $scope.drawChart = function (resultD, displaytypeid, divId,elementId) {} // some other charting code/functions here } }]); })(); 

以上片段是我的指令，它使用的是NG-叫上我的HTML視圖中繼作爲

<div ng-controller="DashboardController" style="width:100%; height:100%;"> 
    <div id="divChart" style="width:100%;" class="clearFloat"> 
     <ng-chart ng-repeat="adelement in UserConfigList" chart-obj="adelement" style='display: inline-block; margin: 20px; width: 400px; height: 450px; background-color: white'> 
     </ng-chart> 
    </div> </div> 

現在我想達到什麼是我希望在運行時對圖表系列單擊事件（我用Highchart.js）對於同一個多圖表添加到我的儀表盤。因此，如果用戶拖動或點擊餅圖的任何部分，我想在運行時繪製更多的ng-chart。這是我想要的：

var template = "<ng-chart chart-obj="+ $scope.chartObj +" style='display: inline-block; margin: 20px; width: 400px; height: 450px; background-color: white'></ng-chart>"; 

    var newElement = $compile(template)($scope); 

    $("#divChart").append(newElement); 

    $scope.insertHere = newElement; 

但是，這似乎並沒有工作，任何缺少/錯誤的代碼上面？我想在指令的當前範圍內傳遞chart-Obj到相同類型的新指令（ng-chart）

Answer 1

您正在犯一個小錯誤，角度不是$compile您的對象變量。相反，它通過引用它來查找範圍上的變量。

所以，你的解決將是：

var template = '<ng-chart chart-obj="chartObj" style="display: inline-block; margin: 20px; width: 400px; height: 450px; background-color: white"></ng-chart>'; 

接下來你想先創建編譯元素，然後將其添加到$scope。

所以這樣的：

var element = angular.element(template); 

var compiled = $compile(element); 

$('#divChart').append(element); 

$timeout(function() { 
    compiled($scope); 
}); 

而且在你向鏈路功能$scope.$watch將無法​​正常工作，因爲這是一個深刻的對象，如果你想$scope.$watch你應該添加作爲第三個參數true。但是因爲您將scope中的對象定義爲雙向綁定變量。你甚至不需要它。