jsonデータをコントローラからディレクティブに渡して表示に表示

コントローラからディレクティブへのJSONデータを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データではありませんテンプレートに表示されます。それはどんなエラーも投げません。これに関する助けは大いに感謝しています。

出典

2016-03-21 vr3w3c9

chartDataにし、使用の内側にそれを変更するには、' NG-繰り返しである何、何も – Grundy

しません= "顧客の支柱"とは？ 'ng-repeat'は決して動かない可能性があります。 – djskinner

あなたは隔離されたスコープを使用します。それは顧客を含んでいませんので、ng-repeat alwasyは何もしません。

ただ、 `customer`のでNG-繰り返しalwasyが含まれていないことを、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>

出典

2016-03-21 11:37:37 Grundy

こんにちは、Grundy、返信いただきありがとうございます。しかし、上記のコードでは、配列が含まれています。しかし、私は配列ではなくjsonオブジェクトを渡したかったのです。 – vr3w3c9

@ vr3w3c9、オブジェクトのサンプルを提供できますか？あなたのサンプルでは、これは構文エラーが表示されるので、入力してください – Grundy

配列を作成してデータを取り込むことができます。しかし、私が望んでいたのは、分離されたスコープを作成し、コントローラーからディレクティブにjsonを渡すことでした。上のサンプルオブジェクトでは、継承されたスコープで使用すると、データが正しく表示されます。 – vr3w3c9

jsonデータをコントローラからディレクティブに渡して表示に表示

答えて

関連する問題