我在将 JSON 数据从 Controller 传递到 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 View 部分的代码:
<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>关于javascript - 将 json 数据从 Controller 传递到指令并在 View 中显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36129883/