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

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 promiseAPI

$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);
});

你当然有这个问题，因为你没有以 angular 的方式使用你的小部件。即使我提供了这个答案，我还是强烈建议您将方法更改为 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 中的数据

Use data stored in $scope in DevExtreme Widgets

javascript

json

angularjs

devextreme