沒有從$ scope模型獲取AngularJS指令中的數據

正在使用AngularJS在網頁上工作。在網頁上，我使用Chartist.js顯示圖表。我想通過調用返回JSON數據的REST服務並將其提供給Chartist圖表數據模型來填充Chartist圖表對象所需的數據。該網頁只是在面板內顯示圖表。我有一個叫做REST服務的Angular控制器，得到了數據，然後我將這些數據分配給$ scope模型。我想將這個模型數據傳遞給Chartist對象。爲此，我有一個指令應用於元素並將模型數據作爲屬性值傳遞給指令，獲取了這些數據，創建了Chartist對象並傳遞了此模型數據。但是，圖表未顯示，表示無/空數據已傳遞給Chartist對象。我在這裏做錯了什麼！？...下面是HTML文件

<!DOCTYPE html> 
<html ng-app="codeQualityApp"> 
<head> 
<title>First Test</title> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script src="lib/angularjs/angular.js"></script> 
<!--<script src="controllers/client.controller.codequality.js"></script>--> 
<link href="css/bootstrap.css" rel="stylesheet" /> 
<link href="css/bootstrap-theme.css" rel="stylesheet" /> 
<link href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" /> 
<script> 
    angular.module("codeQualityApp",[]) 
    .controller('codeQualityCtrl',function($scope,$http) 
    { 
    $scope.violationsData = {}; // Model data in the format below as needed by the Chartist object 
    // $scope.violationsData.labels = ["Clang","MySQL","JDK 8"]; 
    //$scope.violationsData.series= [[369492,167703,159215]]; 

    $http.get("http://localhost:5001rest/codequality/list") // REST call 
    .success(function(data,status,header,config) 
    { 
     var cq_violations = angular.fromJson(data); 
     violationsData = {}; 
     violationsData.labels = new Array(); 
     violationsData.series = new Array(); 
     violationsData.series[0] = new Array(); 
     for(var i =0; i < cq_violations.length; i++) 
     { 
     violationsData.labels[i] = cq_violations[i].name; 
     violationsData.series[0][i] = parseInt(cq_violations[i].msr[0].val,10); 
     } 
     $scope.violationsData = violationsData; // Populating the model data 
    }) 
    .error(function(data,status,header,config) 
    { 
     $scope.error = data; 
    }); 
    }) 
    .directive("cqChart",function() 
    { 
     return function(scope,element,attrs) 
     { 
      chartdata = scope[attrs["chartdata"]]; // Accessing the attribute value 
      console.log("ChartData:",chartdata); // Am getting empty object here!!! 
      new Chartist.Bar('.ct-chart', chartdata); // Bar chart with the data as in chartdata 
                       // but chart not displayed as chartdata is empty 
                       // object!! 
     } 
    }); 


</script> 
</head> 

<body ng-controller="codeQualityCtrl"> // Controller 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Dashboard</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav"> 
     <li><a href="master.html">Master</a></li>  
     <li><a href="#">Project/Features</a></li> 
     <li><a href="build.html">Build</a></li> 
     <li class="active"><a href="#">Code Quality</a></li> 
     <li><a href="#">Test Execution</a></li> 
     <li><a href="#">Deployments</a></li> 

     </ul> 
    </div> 
    </div> 
</nav> 

<div class="alert alert-danger" ng-show="error"> 
Error ({{error}}). CodeQuality data was not loaded. 
<a href="/app.html" class="alert-link">Click here to try again</a> 
</div> 

<div class="panel panel-default" ng-hide="error"> 
    Data : {{violationsData}} <!-- Got proper data here --> 
<!-- Display the chart here --> 
<script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> 
<div class="ct-chart ct-perfect-fourth"></div> 
<cq-chart chartdata="violationsData"> <!-- custom directive ... not working... data is empty --> 
</div> 

</body> 
</html>

來源

2015-11-05 satsun

-1

您正在訪問的值的方式，你總是初始化值沒有更新你會發現它空的，因爲這是初始值$scope.violationsData = {};你的價值被更新後阿賈克斯成功。更新的值不會傳播到您的指令。因此，要得到更新值可以$watch或通過使用=值一樣

.directive("cqChart", function() { 
    return { 
     restrict: 'E', 
     scope: { 
      // this will create isolate scope and two way bind between 
      // your controller's violationsData and directive's chartdata 
      chartdata: '=' 
     }, 
     link: function (scope, element, attrs) { 
      //now this will be accessable through scope 
      console.log("ChartData:", scope.chartdata); 
     } 
    } 
});

注意 - 不要使用something = someValue;使用VAR像var something = someValue否則這將創建全局變量。

來源

2015-11-05 10:42:07 Reza

謝謝Reza。我確實試圖去做你已經表明過的東西，但不知何故，我在'範圍：{..'行...中得到了語法錯誤（缺少;語句之前），並且所有的語法都是正確的。這是奇怪的，但只是無法弄清楚......最後，實際上，我完全刪除了控制器，只有指令，並在這樣的指令中有REST調用： – satsun

這很奇怪！你的最新指令代碼是怎樣的？ – Reza

.directive（「cqChart」，function（$ http） {0122}成功（功能（數據，狀態，標題，配置） { var cq_violations = angular.fromJson（data）; var violationsData = {}; //填充的違規數據.... console.log（「ChartData：」，violationData）; new Chartist.Bar（'.ct-chart'，violationsData）; }） } }）;在HTML – satsun

沒有從$ scope模型獲取AngularJS指令中的數據

回答

相關問題