添加指令编程方式使用$编译和范围传递数据，

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中的对象定义为双向绑定变量。你甚至不需要它。