2014-07-18 4 views
0

거의 3 일 동안 솔루션을 찾고 있는데 알아 내지 못합니다. 나는라는 파일이MySQL 내부의 .js 파일에서 데이터 가져 오기

: 이것은 내 문제입니다 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> 

을 그리고 난라는 다른 파일이 있습니다

// 
    // 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); 
    }]) 
    ; 

내가 원하는 건에를 app.js를 달성은 MySQL에서 데이터를 읽고 해당 데이터를 app.js 파일 내에서 사용하는 것입니다. 나는 정말로 어떤 도움도 필요하다. 처음 5 개의 google 페이지에서이 테마에 대한 모든 기사를 읽었지만 성공하지 못했습니다. 모든 종류의 "튜토리얼"을 시도했지만 솔루션을 찾을 수있었습니다.

답변

0

사용 jQuerys AJAX 함수는 PHP 서비스로 데이터를 보낼 : 트릭을 할해야

// connect to your database first 

$username = $_POST["var"]; 
$sql="SELECT * FROM users WHERE anything = '$var'"; 
$result = mysql_query($sql); 

if($result === FALSE) { 
    die(mysql_error()); 
} 

while($row = mysql_fetch_array($result)){ 
    return $row["variable"]; 
} 

: 당신의 PHP 서비스에서

$.ajax({ 
     type: 'POST', 
     url: path + '/php/yourService.php', 
     data: 'var=' + var, 
     success: function (response) { 
      // Do smth with the response 
     } 
    }); 

는 데이터베이스의 데이터를 읽습니다. 각도에 상관없이 중요하지 않습니다. 반환 된 데이터는 ajax onSuccess 함수의 응답 변수를 통해 액세스 가능합니다. 희망이 도움이

관련 문제