Question

我现在的代码非常简单。在我的script.js中我有：

var myApp = angular.module('myApp', ['dx']);
myApp.controller("defaultCtrl", function ($scope, $http) {
    $http.get("test.json").success(function (response) {
        $scope.data = response;
});

console.log($scope.data);//This shows "undefined"

$(function () {
    $("#gauge").dxCircularGauge({
        rangeContainer: {backgroundColor: 'peachpuff'},
        valueIndicator: {color: 'palegoldenrod'},
        value: 32,
        title: $scope.data[0].title,
        animation: {
            easing: 'linear',
            duration: 750
        }
     })
   });
});

然后在我的Html文件中，我有一个基本的AngularJS模块。

<body ng-controller="defaultCtrl">
    <div id = "gauge">
    </div>
</body>

我需要从json文件中读取设置，并从这些设置生成图形。但是，我被卡住了。任何帮助，将不胜感激。请不要告诉我不要使用AngularJS或DevExtreme。

Answer 1

这是一个转机问题。所以最初$ scope.data没有定义，你尝试将它绑定到你的小部件。

绑定成功内部的数据或$ q promise API

$scope.BindWidget = function(data){
  $("#gauge").dxCircularGauge({
        rangeContainer: {backgroundColor: 'peachpuff'},
        valueIndicator: {color: 'palegoldenrod'},
        value: 32,
        title: data[0].title,
        animation: {
            easing: 'linear',
            duration: 750
        }
     })
   });
}

$http.get("test.json").success(function (response) {
       $scope.BindWidget(response);
});

当然，您遇到此问题是因为您没有以有角度的方式使用窗口小部件。即使我提供了这个答案，我强烈建议您将方法更改为DevExpress建议的正确方法。

Here you can find more information about how to use your guage control in an angular way so it responds to scope changes and becomes part of your digest cycle

在DevExtreme Widgets中使用存储在$ scope中的数据

1 个答案: