0

私はjsの初心者で、これはstackoverflowでも最初の質問です。したがって、ダウングレードのコメントや行為は理解できます。

これはgithubのangular-js-flowchartプロジェクトです。これは、factory を $http を含むデータ ゲッターとして使用する方法を説明する別のスタック オーバーフロー トピックです。

$http 関数を返す Angular ファクトリを使用して、グラフのデータを生成する必要があります。$http は、データベースからデータを取得する php サービスと通信します。jsonlint を使用してサービスをテストし、正常に動作しました。サービスのディレクトリは、html ファイルに対して相対的にチェックされます。

別の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 ではなく、promise を返そうとしました。それは今動作します。コントローラーはサービスを使用してデータを取得できるようになりました。ただし、コントローラーの変数を取得したデータに設定することはできませんでした。コードは次のとおりです。

.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 に答える