未从 $scope 模型获取 AngularJS 指令中的数据答案

【问题标题】：Not getting data in AngularJS Directive from the $scope model未从 $scope 模型获取 AngularJS 指令中的数据
【发布时间】：2016-02-06 02:50:32
【问题描述】：

我正在使用 AngularJS 开发网页。在网页上，我使用 Chartist.js 显示图表。我想通过调用返回 JSON 数据并将其提供给 Chartist 图表数据模型的 REST 服务来填充 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>

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

你访问值的方式，你总是得到初始化值不更新你发现它是空的，因为那是初始值$scope.violationsData = {};你的值在ajax成功后更新。更新后的值不会传播到您的指令。因此，要获取更新的值，您可以$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); 
        }
    }
});

注意 - 不要像var something = someValue 那样使用something = someValue; 使用var 否则这将创建全局变量。

【讨论】：

谢谢礼萨。我确实尝试按照您的指示进行操作，但不知何故，我在 'scope:{..' 行出现了语法错误（缺少 ; before 语句）......并且所有语法都是正确的。这很奇怪，但就是想不通……最后，实际上，我完全移除了控制器，只有指令，并且指令中的 REST 调用如下：
这很奇怪！你最新的指令代码怎么样？
.directive("cqChart",function($http) { return function(scope,element,attrs) { $http.get("localhost:5001/rest/codequality/list") .success(function(data,status, header,config) { var cq_violations = angular.fromJson(data); var violationData = {}; // 填充的违反数据.... console.log("ChartData:",violationsData); new Chartist.Bar('.ct-图表', 违规数据); }) } }); 在 HTML