将 JSON 数据从控制器传递到指令并显示在视图中

passing json data from controller to directive & displaying in view

本文关键字：指令显示视图数据 JSON 控制器更新时间：2023-09-26

我在 Angular js 中将 JSON 数据从控制器传递到指令时遇到问题。下面是包含控制器和指令元素的代码：

  var app = angular.module('chartApp',[]) ;   
  app.controller('DataController', ['$scope', function($scope){
        $scope.lineData = { 
              "x": 1,
              "y": 5
            }, {
              "x": 20,
              "y": 20
            }, {
              "x": 40,
              "y": 10
            }, {
              "x": 60,
              "y": 40
            }, {
              "x": 80,
              "y": 5
            }, {
              "x": 100,
              "y": 60
        }

  }]);      
 app.directive('lineChart',function(){
    return{
        restrict: 'EA',
        scope:{
                chartData: '='
            },
        template: '<ul><li ng-repeat="prop in customer">{{chartData.x}}</li></ul>'
        //template:'xValue: {{lineData.x}} yValue: {{lineData.y}}'
    } ;
    });

下面是代码的 html 视图部分：

<body>
<div ng-app="chartApp" ng-controller="DataController">
      <h1>Pareto Chart</h1>
  <div Line-Chart chart-data='lineData' ></div>
</div>
</body>

当我尝试运行上述代码时，JSON 数据未显示在模板中。它既不会引发任何错误。非常感谢对此的任何帮助。

您使用隔离的作用域，不包含客户，因此ng-repeat始终不执行任何操作。

只需将其更改为chartData和内部使用prop.x

var app = angular.module('chartApp', []);
app.controller('DataController', ['$scope',
  function($scope) {
    $scope.lineData = [{
      "x": 1,
      "y": 5
    }, {
      "x": 20,
      "y": 20
    }, {
      "x": 40,
      "y": 10
    }, {
      "x": 60,
      "y": 40
    }, {
      "x": 80,
      "y": 5
    }, {
      "x": 100,
      "y": 60
    }];
  }
]);
app.directive('lineChart', function() {
  return {
    restrict: 'EA',
    scope: {
      chartData: '='
    },
    template: '<ul><li ng-repeat="prop in chartData">{{prop.x}}</li></ul>'
    //template:'xValue: {{lineData.x}} yValue: {{lineData.y}}'
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="chartApp" ng-controller="DataController">
  <h1>Pareto Chart</h1>
  <div Line-Chart chart-data='lineData'></div>
</div>