Question

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

这是github上的angular-js-flowchart项目。这是another stackoverflow topic，它教导如何将工厂用作涉及$ http的数据获取器。

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

我复制了＆＃34;工厂＆＃34;来自另一个stackoverflow问题的代码，并应用于angularjs-flowchart Github项目中的app.js。

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

这是由我修改的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");
        }
    };

});

请帮助，谢谢。

Answer 1

我试图在服务调用中直接设置$ 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);
});

Answer 2

我试图回复一个承诺，而不是来自工厂的$ 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仍未设置。

AngularJS：工厂使用$ http从php服务返回数据

2 个答案: