從控制器傳遞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

您使用隔離範圍，即不包含'customer'所以NG-重複alwasy無能爲力 – Grundy

什麼是'NG重複=「顧客中的道具」指的是？「ng-repeat」可能永遠不會運行。 – djskinner

您使用隔離範圍，不包含客戶所以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>

來源

2016-03-21 11:37:37 Grundy

嗨格蘭迪，感謝您的回覆。但是在上面的代碼中，你已經包含了一個數組。但我想傳遞json對象而不是數組。 – vr3w3c9

@ vr3w3c9，所以，你能提供對象的樣本嗎？在你的樣本，而不是拼寫錯誤，因爲你得到這個 – Grundy

的語法錯誤我能夠通過創建一個數組來填充數據。但我想要的只是創建一個獨立的範圍，並將Controller中的json傳遞給指令。通過上面的示例對象，當我通過繼承範圍使用時，數據顯示正常。 – vr3w3c9

從控制器傳遞json數據到指令並在視圖中顯示

回答

相關問題