Question

我确实检查了每个ng-repeat个问题，但是很多问题都没有处理数据库，人们只是在JS中使用数组，而简单的$scope.array.push("stuff")也适用于它们。< / p>

我已尝试$scope.apply，$rootScope，甚至在成功发布POST请求后立即调用GET请求。

我有一个包含2个文字输入的表单，date和content。
按下提交按钮后，使用PHP将日期和内容添加到MySQL数据库中。

数据可以很好地添加到MySQL数据库中，并且检索也可以正常工作。
甚至执行成功POST请求中的GET请求也是如此。
所以我不明白为什么它会强迫我刷新页面以查看更新的ng-repeat结果。

我错过了什么吗？
非常感谢任何帮助或建议，谢谢！

相关的 HTML 代码

<div ng-controller="insertController">
  <h2> What I learned today </h2>
  <form>
    Date <br>
    <input type="text" ng-model="date"><br><br>
      Content <br>
      <textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
      <input type="button" value="Submit" ng-click="insertdata()">
  </form>
</div>

<div ng-controller="fetchController">
  <span ng-repeat="item in results">
    {{item.date}}<br>
    {{item.content}}<br><br>
  </span>
</div>

insertController.js

var app = angular.module('myApp', []);

app.controller('insertController', function($scope, $http) {
  $scope.insertdata = function() {
    $http({
      method: 'POST',
      url: 'http://localhost/storestuff/insert.php',
      data: {'date':$scope.date, 'content':$scope.content, 'in':'json-format'},
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .then(function(res) {
      console.log("Successful response", res)
      $scope.date = "";
      $scope.content = "";
      $http.get('http://localhost/storestuff/fetch.php')
        .then(function successCallback(response) {
          alert("GOT NEW DATA");
          $scope.results = response.data; // Allow angular to access the PHP output data
      });
      $scope.apply;
    })
    .catch(function(err) {
      console.error("Error with POST", err);
    });
  }
});

<小时/> insert.php

<?php

  header('Access-Control-Allow-Origin: *');

  $theConnection = mysqli_connect("localhost", "root", "", "storestuff");
  if(mysqli_connect_errno()) {
    echo "Failed to connect to MySQL.";
  }

  $theData = json_decode(file_get_contents('php://input'));
  $date = mysqli_real_escape_string($theConnection, $theData->date);
  $content = mysqli_real_escape_string($theConnection, $theData->content);

  mysqli_query($theConnection, "INSERT INTO thestuff(date, content) VALUES('$date', '$content')");

  mysqli_close($theConnection);

?>

fetchController.js

app.controller('fetchController', function ($scope, $http) {
  $http.get('http://localhost/storestuff/fetch.php')
    .then(function successCallback(response) {
      $scope.results = response.data; // Allow angular to access the PHP output data
  });
});

<小时/> fetch.php

<?php
  header('Access-Control-Allow-Origin: *'); // clientside(Node) <-> serverside(PHP)

  $mysqli = new mysqli("localhost", "root", "", "storestuff");

  if($mysqli->connect_error) {
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();
  }

  $query = "SELECT * FROM thestuff";
  $theData = array();

  if($result = $mysqli->query($query)) {
    while($row = mysqli_fetch_array($result)) {
      $theData[] = array(
        'date'=>$row['date'],
        'content'=>$row['content']);
    }
    echo json_encode($theData); // Echo the output for the controller to access
    $result->free(); // Free the result set
  }
  else {
    echo "0 results.";
  }
  $mysqli->close(); // Close the connection
?>

Answer 1

此代码的问题在于您有两个不同的控制器，两个控制器都有不同的范围。在一个控制器中插入/更新$ scope.results对象/数组，不会更新其他$ scope;它们是独立的不同范围，都带有数据副本。

在您的使用案例中使用两个控制器看起来是正确的。但是，您应该使用服务来访问远程数据。请查看此答案以获取有关此https://stackoverflow.com/a/20181543/2603735的一些建议。

使用该答案中的服务，可以将远程数据的数组/对象存储在一个位置，并从两个控制器引用SAME对象。因此，从一个控制器更新，也将更新另一个。

Answer 2

对于任何偶然发现我的问题的人，我不想只是将我的破译代码留在那里而没有答案，但我也无法编辑问题并放入我的答案因为这会违背目的StackOverflow的。的

所以这是我对自己问题的回答。

我不得不对之前所做的做出很多改变。到目前为止，最大的变化是我如何处理fetch.php返回的数据。

而不是仅仅将输出转换为$scope.results = response.data;，如果我没有动态添加到数据库，这将正常工作，但对于这种情况，我最终使用了服务。
（感谢@ jayden-meyer建议使用Angular服务。）

该服务允许我从我的insertController和我的fetchController访问相同的数组，而不是在两个控制器中都有相同数组的副本，这是我的问题。

HTML代码无变化。
没有对insert.php的更改。
没有对fetch.php进行任何更改。

insertController.js
我删除了.then方法中的无关的GET请求，这是完全不需要的，因为我可以推送到现有的数组。
（感谢@charlietfl的提示）
相反，我在resultsService.addItem($scope.date, $scope.content);方法中添加了.then。
我还将我的服务添加为参数。
app.controller('insertController', function($scope, $http, resultsService) {

result.js

app.service('resultsService', function() {
  var results = new Array();

  var addItem = function(date, content) {
    var obj = new Object();
    obj["date"] = date;
    obj["content"] = content;
    results.push(obj);
  }

  var getItems = function() {
    return results;
  }

  return {
    addItem: addItem,
    getItems: getItems
  };

});

fetchController.js

var size = 0;
var count = 0;

app.controller('fetchController', function ($scope, $http, resultsService) {
  $http.get('http://localhost/storestuff/fetch.php')
    .then(function successCallback(response) {
      size = (response.data).length;
      while(count < size) {
        var date = response.data[count].date;
        var content = response.data[count].content;
        resultsService.addItem(date, content);
        count++;
      }
      size = 0;
      count = 0;
      $scope.results = resultsService.getItems();
  });
});

为什么不动态重复更新？

2 个答案: