从.js文件中的MySQL中获取数据[重复]

This question already has an answer here:

I am looking for a solution for almost 3 days but i can't figure it out. This is my problem:

I have file called: index.php

<html>
    <head>
        <title>AngularJS-FlowChart</title>

        <!-- 
        LiveReload support.
        http://livereload.com/
        -->
        <script src="http://localhost:35729/livereload.js?snipver=1"></script>

    </head> 
    <body 
        ng-app="app" 
        ng-controller="AppCtrl"
        mouse-capture
        ng-keydown="keyDown($event)"
        ng-keyup="keyUp($event)"
        >

        <div style="width: 100%; overflow: hidden;">
            <!--<div style="width: 600px; float: left;"> 
                <textarea 
                    style="width: 100%; height: 100%;"
                    chart-json-edit
                    view-model="chartViewModel"
                    >
                </textarea>
            </div>-->
            <div style="margin-left: 0px;">
                <button
                    ng-click="addNewNode()"
                    title="Add a new node to the chart"
                    >
                    Add Node
                </button>
                <button
                    ng-click="addNewInputConnector()"
                    ng-disabled="chartViewModel.getSelectedNodes().length == 0"
                    title="Add a new input connector to the selected node"
                    >
                    Add Input Connector
                </button>
                <button
                    ng-click="addNewOutputConnector()"
                    ng-disabled="chartViewModel.getSelectedNodes().length == 0"
                    title="Add a new output connector to the selected node"
                    >
                    Add Output Connector
                </button>
                <button
                    ng-click="deleteSelected()"
                    ng-disabled="chartViewModel.getSelectedNodes().length == 0 && chartViewModel.getSelectedConnections().length == 0"
                    title="Delete selected nodes and connections"
                    >
                    Delete Selected
                </button>

                <!--
                This custom element defines the flowchart.
                -->
                <flow-chart
                    style="margin: 5px; width: 40%; height: 70%; float: right"
                    chart="chartViewModel"
                    >
                </flow-chart>

                            <flow-chart
                    style="margin: 5px; width: 40%; height: 70%; float: left"
                    chart="chartViewModel"
                    >
                </flow-chart>
            </div>
        </div>

        <link rel="stylesheet" type="text/css" href="app.css">

        <!-- Library code. -->
        <script src="lib/jquery-2.0.2.js" type="text/javascript"></script>
        <script src="lib/angular.js" type="text/javascript"></script>

        <!-- Flowchart code. -->
        <script src="debug.js" type="text/javascript"></script>
        <script src="flowchart/svg_class.js" type="text/javascript"></script>
        <script src="flowchart/mouse_capture_service.js" type="text/javascript"></script>
        <script src="flowchart/dragging_service.js" type="text/javascript"></script>
        <script src="flowchart/flowchart_viewmodel.js" type="text/javascript"></script>
        <script src="flowchart/flowchart_directive.js" type="text/javascript"></script>

        <!-- App code. -->
        <script src="app.js" type="text/javascript"></script>
    </body>
</html>

And I have another file called: 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) {

        //
        // 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;

        //
        // Setup the data-model for the chart.
        //
        var chartDataModel = {};

        //
        // 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 new node!", "New node");
            if (!nodeName) {
                return;
            }

            //
            // Template for a new node.
            //
            var newNodeDataModel = {
                name: nodeName,
                id: nextNodeID++,
                x: 50,
                y: 50
            };

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

        //
        // Add an input connector to selected nodes.
        //
        $scope.addNewInputConnector = function () {
            var connectorName = prompt("Enter a connector name:");
            if (confirm(connectorName)) {
                var selectedNodes = $scope.chartViewModel.getSelectedNodes();
                for (var i = 0; i < selectedNodes.length; ++i) {
                    var node = selectedNodes[i];
                    node.addInputConnector({
                        name: connectorName
                    });
                }
            } else return;
        };

        //
        // Add an output connector to selected nodes.
        //
        $scope.addNewOutputConnector = function () {
            var connectorName = prompt("Enter a connector name:");
            if (confirm(connectorName)) {
                var selectedNodes = $scope.chartViewModel.getSelectedNodes();
                for (var i = 0; i < selectedNodes.length; ++i) {
                    var node = selectedNodes[i];
                    node.addOutputConnector({
                        name: connectorName,
                    });
                }
            } else return;
        };

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

            $scope.chartViewModel.deleteSelected();
        };

        //
        // Create the view-model for the chart and attach to the scope.
        //
        $scope.chartViewModel = new flowchart.ChartViewModel(chartDataModel);
    }])
    ;

The thing I want to achieve is to read data from MySQL and use that same data inside app.js file. I'd really need any help please. I was reading all articles about this thema on first 5 google pages but without any success. I tried all sorts of "tutorials" but i could find the solution.

</div>
查看全部
donglu9134
donglu9134
2014/07/18 09:57
  • php
  • mysql
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

1个回复