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

Question

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

  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数据。 它既不抛出任何错误。 任何帮助对此表示感谢。

Answer 1

您使用孤立的范围，该范围不包含客户，因此ng-repeat alwasy不执行任何操作。

只需将其更改为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>

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

问题描述

1 个解决方案

解决方案1
4 2016-03-21 11:37:37

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

问题描述

1 个解决方案

解决方案1 4 2016-03-21 11:37:37

解决方案1
4 2016-03-21 11:37:37