角度js指令作用域值与控制器绑定undefined

我创建了一个显示图表的简单指令。角度js指令作用域值与控制器绑定undefined

我有一个$ http请求的角度指令。我必须将响应存储到我的$ scope中，并将此$ scope值存储到我的链接指令范围中以显示图表。

我试图使用上午图表角度图

这里实施轨距图表是我的代码：

app.directive('gauge',function(){ 
    return { 
     restrict: 'AEC', 
     replace:true, 
     template: '<div id="speeda_meter"></div>', 
     scope: {ranges:'='}, 
     controller: function ($scope, $http,apiurl) { 
      $scope.type = 'percentage'; 
      function getUsage(type){ 
       $http({ 
        method: 'POST', 
        url: apiurl + '/getUsage', 
        data: {'type': $scope.type} 
       }).success(function (data, status) { 
        if (data.status == true) { 
         $scope.ranges = data.result.ranges; 
         $scope.interval = data.result.interval; 
        }  
       }); 
      }  
      getUsage($scope.type); 

     }, 
     link: function (scope, element, attrs,ctrl) { 
      var chart = false;    
     //  ngModelCtrl.$formatters.push(function(modelValue) { 
     //   return modelValue; 
      // }); 

      // ngModelCtrl.$render = function() { 

       //scope.ranges = ngModelCtrl.$viewValue; 
       console.log(ctrl.ranges); 
       var initChart = function() { 
        if (chart) chart.destroy(); 
        var config = scope.config || {}; 
        chart = AmCharts.makeChart("speeda_meter", { 
          "type": "gauge", 
          "axes": [ { 
           "axisThickness": 0, 
           "axisAlpha": 0.2, 
           "tickAlpha": 0.2, 
           "valueInterval": 425, 
           "inside": false, 
           "fontSize": 11, 
           "gridInside": true, 
           "startAngle": -90, 
           "endAngle": 90, 
           "bands": scope.ranges, 
           "topText": "497", 
           "topTextYOffset": 105, 
           "topTextColor": "#555555", 
           "topTextFontSize": 50, 
           "bottomText": "Watts", 
           "bottomTextYOffset": -10, 
           "bottomTextColor": "#909090", 
           "bottomTextFontSize": 18, 
           "endValue": 1700 
          }], 
          "arrows": [{ 
           "startWidth" : 15, 
           "nailBorderThickness" : 1, 
           "nailRadius" : 8 , 
           "color" : "#5b5b5b", 
          }], 
          "export": {"enabled": true} 
        });   
       }; 
       initChart();  
      // }    
     }   
    } 
}); 

<gauge ranges="ranges" interval="interval"></gauge>

我试图范围和间隔与所述响应于在所述链路分配范围，但它是未定义的。那有什么问题？

任何解决方案？

来源

2016-09-28 Trent

您正试图为异步调用后分配一个值。当你的amhchart被渲染时，它将获取该特定实例的值，并且不会给你像角度do那样的两种方式绑定的能力。因此，当执行init函数时，没有$ scope.ranges的值，它们在图表。

你应该呈现图表调用完成后，像这样

function getUsage(type){ 
      $http({ 
       method: 'POST', 
       url: apiurl + '/getUsage', 
       data: {'type': $scope.type} 
      }).success(function (data, status) { 
       if (data.status == true) { 
        $scope.ranges = data.result.ranges; 
        $scope.interval = data.result.interval; 

        initChart()//call the chart rendering here 
       }  
      }); 
     }  
     getUsage($scope.type);

或至少当通话结束

重绘

来源

2016-09-28 12:53:28 AbhiGoel

角度js指令作用域值与控制器绑定undefined

回答

相关问题