0

我是 js 的新手，这也是我在 stackoverflow 中的第一个问题。因此，任何降级的评论或行为都是可以理解的。

这是github 上的angular-js-flowchart项目。这是另一个 stackoverflow 主题，它教授如何使用工厂作为涉及 $http 的数据获取器。

我需要使用返回 $http 函数的 Angular 工厂为图表生成数据。$http 与从数据库中检索数据的 php 服务对话。我已经使用 jsonlint 测试了该服务并且它工作正常。相对于 html 文件检查 service 的目录。

我从另一个 stackoverflow 问题中复制了“工厂”代码，并应用于 angularjs-flowchart Github 项目中的 app.js。

问题是 Chrome 控制台不断抛出我无法理解的错误。未检索数据。控制台上的错误是“TypeError：无法读取未定义的属性'getData'”

这是由我修改的 app.js：

//
// Define the 'app' module.
//
angular.module('app', ['flowChart', ])

//
// Simple service to create a prompt.
//
.factory('prompt', function () {

    /* Uncomment the following to test that the prompt service is working as expected.
    return function () {
        return "Test!";
    }
    */

    // Return the browsers prompt function.
    return prompt;
})

//
// Application controller.
//
.controller('AppCtrl', ['$scope', 'prompt', function AppCtrl ($scope, prompt, dataFactory) {

    //
    // Code for the delete key.
    //
    var deleteKeyCode = 46;

    //
    // Code for control key.
    //
    var ctrlKeyCode = 65;

    //
    // Set to true when the ctrl key is down.
    //
    var ctrlDown = false;

    //
    // Code for A key.
    //
    var aKeyCode = 17;

    //
    // Code for esc key.
    //
    var escKeyCode = 27;

    //
    // Selects the next node id.
    //
    var nextNodeID = 10;


    //
    // Event handler for key-down on the flowchart.
    //
    $scope.keyDown = function (evt) {

        if (evt.keyCode === ctrlKeyCode) {

            ctrlDown = true;
            evt.stopPropagation();
            evt.preventDefault();
        }
    };

    //
    // Event handler for key-up on the flowchart.
    //
    $scope.keyUp = function (evt) {

        if (evt.keyCode === deleteKeyCode) {
            //
            // Delete key.
            //
            $scope.chartViewModel.deleteSelected();
        }

        if (evt.keyCode == aKeyCode && ctrlDown) {
            // 
            // Ctrl + A
            //
            $scope.chartViewModel.selectAll();
        }

        if (evt.keyCode == escKeyCode) {
            // Escape.
            $scope.chartViewModel.deselectAll();
        }

        if (evt.keyCode === ctrlKeyCode) {
            ctrlDown = false;

            evt.stopPropagation();
            evt.preventDefault();
        }
    };

    //
    // Add a new node to the chart.
    //
    $scope.addNewNode = function () {

        var nodeName = prompt("Enter a task name:", "New Task");
        if (!nodeName) {
            return;
        }

        //
        // Template for a new node.
        //
        var newNodeDataModel = {
            name: nodeName,
            id: nextNodeID++,
            x: 0,
            y: 0,
            inputConnectors: [ 
                {
                    name: "Pre"
                }           
            ],
            outputConnectors: [ 
                {
                    name: "Sub"
                }           
            ],
        };

        $scope.chartViewModel.addNode(newNodeDataModel);
    };

    //
    // Add an input connector to selected nodes.
    //
    $scope.addNewInputConnector = function () {
        var connectorName = prompt("Enter a connector name:", "New connector");
        if (!connectorName) {
            return;
        }

        var selectedNodes = $scope.chartViewModel.getSelectedNodes();
        for (var i = 0; i < selectedNodes.length; ++i) {
            var node = selectedNodes[i];
            node.addInputConnector({
                name: connectorName,
            });
        }
    };

    //
    // Add an output connector to selected nodes.
    //
    $scope.addNewOutputConnector = function () {
        var connectorName = prompt("Enter a connector name:", "New connector");
        if (!connectorName) {
            return;
        }

        var selectedNodes = $scope.chartViewModel.getSelectedNodes();
        for (var i = 0; i < selectedNodes.length; ++i) {
            var node = selectedNodes[i];
            node.addOutputConnector({
                name: connectorName,
            });
        }
    };

    //
    // Delete selected nodes and connections.
    //
    $scope.deleteSelected = function () {

        $scope.chartViewModel.deleteSelected();
    };


    //
    // Setup the data-model for the chart.
    //
    var chartDataModel = {};
    var handleSuccess = function(data, status){
        chartDataModel = data;
        console.log(chartDataModel);
    };

    dataFactory.getData().success(handleSuccess);

    //
    // Create the view-model for the chart and attach to the scope.
    //
    $scope.chartViewModel = new flowchart.ChartViewModel(chartDataModel);
}])
.factory('dataFactory', function($http){
    return {
        getData : function(){
            return $http.post("chart-data-retrieve.php");
        }
    };

});

基本上，我添加但不起作用的是

// Setup the data-model for the chart.
//
var chartDataModel = {};
var handleSuccess = function(data, status){
    chartDataModel = data;
    console.log(chartDataModel);
};

dataFactory.getData().success(handleSuccess);

和

.factory('dataFactory', function($http){
    return {
        getData : function(){
            return $http.post("chart-data-retrieve.php");
        }
    };

});

请帮忙，谢谢。

4

2 回答 2

2

我尝试直接在服务调用内部设置$scope的chartViewModel，所以变量chartDataModel就变得多余了。它有效。

// Create the view-model for the chart and attach to the scope.
//
myService.then(function(data) {
    $scope.chartViewModel = new flowchart.ChartViewModel(data);
});
于 2014-06-26T03:52:34.437 回答
1

我试图返回一个承诺，而不是工厂的 $http。现在可以了。控制器现在可以使用该服务来检索数据。但是我仍然无法将控制器的变量设置为检索到的数据。以下是代码：

.factory('myService', function($http, $q) {
  //this runs the first time the service is injected
  //this creates the service
  var deferred = $q.defer();

  $http.get('chart-data-retrieve.php').then(function(resp) {
    deferred.resolve(resp.data);
  });

  return deferred.promise;
})

控制器内部的代码：

var chartDataModel = {};
//get data from myService factory
myService.then(function(data) {
    alert(data);
    chartDataModel = data;
});

目前，alert() 已经向我显示了数据。但是，变量 chartDataModel 仍未设置。

于 2014-06-25T03:37:33.327 回答