angularjs - 广播模式的改变

我正在尝试设置一个小 POC 来看看 Angular 是否适用于我正在做的事情。

我设置了一个 REST 服务器，我可以通过 Angular 对其进行 CRUD。然而，由于文档和教程到处都是(阅读: super 不一致)，我不确定我没有看到的行为是错误代码的结果，还是我不能这样做。

我从文档中了解到双向绑定(bind)是可用的，但尚不清楚它是如何工作的。注意，我读过几十篇文章解释它如何在低级别工作a'la https://stackoverflow.com/a/9693933/2044377但无法回答我自己的问题。

我有 Angular 地与修改 SQL 数据库的 REST 服务进行对话。

我想知道并尝试进行 POC 的是，如果我打开了 2 个浏览器并且我更改了数据库中的值，它会反射(reflect)在另一个浏览器窗口中吗？

正如我所说，我让它更新数据库，但到目前为止它还没有更新其他浏览器窗口。

app.js

angular.module('myApp', ['ngResource']);

var appMock = angular.module('appMock', ['myApp', 'ngMockE2E']);
appMock.run(function($httpBackend) {});

controllers.js

function MainCtrl($scope, $http, $resource) {
  $scope.message = "";
  $scope.fruits = [];
  $scope.fruit = {};
  $scope.view = 'partials/list.html';

  var _URL_ = '/cirest/index.php/rest/fruit';


  function _use_$resources_() { return false; }
  function _fn_error(err) {
    $scope.message = err;
  } 

  $scope.listFruits = function() {

    $scope.view = 'partials/list.html';

    var fn_success = function(data) {
        $scope.fruits = data;
    };

    $http.get(_URL_).success(fn_success).error(_fn_error);

  }


  function _fn_success_put_post(data) {
        $scope.fruit = {};
        $scope.listFruits();  
  }

  function createFruit() {
        $http.post(_URL_, $scope.fruit).success(function(data){
        $scope.listFruits()
      }).error(_fn_error);

  }


  function updateFruit() {
      $http.post(_URL_, $scope.fruit).success(_fn_success_put_post).error(_fn_error);
  }

  function deleteFruit() {

      $http.put(_URL_, $scope.fruit).success(_fn_success_put_post).error(_fn_error);

  }

 $scope.delete = function(id) {
    if (!confirm("Are you sure you want do delete the fruit?")) return; 
        $http.delete("/cirest/index.php/rest/fruit?id=" + id).success(_fn_success_put_post).error(_fn_error);

  }


  $scope.newFruit = function() {
    $scope.fruit = {};
    $scope.fruitOperation = "New fruit";
    $scope.buttonLabel = "Create";
    $scope.view = "partials/form.html";
  }

  $scope.edit = function(id) {
    $scope.fruitOperation = "Modify fruit";
    $scope.buttonLabel = "Save";

    $scope.message = "";

    var fn_success = function(data) {
        $scope.fruit = {};
        $scope.fruit.id = id;
        $scope.view = 'partials/form.html';
    };


      $http.get(_URL_ + '/' + id).success(fn_success).error(_fn_error);

  }


  $scope.save = function() {
    if ($scope.fruit.id) {
      updateFruit();
    }
    else {
      createFruit();
    }
  }

  $scope.cancel = function() {
    $scope.message = "";
    $scope.fruit = {};
    $scope.fruits = [];
    $scope.listFruits();    
  }

  $scope.listFruits();
}
MainCtrl.$inject = ['$scope', '$http', '$resource'];

列表.html

{{message}}
<hr/>
   <a href="" ng-click="newFruit()">New Fruit</a>  
   <ul ng-model="listFruit">
      <li ng-repeat="fruit in fruits">
        <a href="" ng-click="edit(fruit.id)">id [{{fruit.id}}] {{fruit.name}} is {{fruit.color}}</a>
        [<a href="" ng-click="delete(fruit.id)">X</a>]
    </li>
   </ul>

index.html

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>FRUUUUUUUUUUUUUUUUUUUUUUUUUUUIT</title>
  <link rel="stylesheet" href="css/bootstrap/css/bootstrap.css"/>
</head>
<body>
  <div class="navbar">NAVBARRRRRRRRRRR</div>
  <div class="container">
    <div class="row">
      <div ng-controller="MainCtrl">

          <button ng-click="listFruits()">ListFruit()</button>
          <button ng-click="cancel()">Cancel()</button>


                <ng-include src="view"></ng-include>          

        </div>

    </div>
  </div>


  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-resource.js"></script>
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
</body>
</html>

form.html

<h3>{{fruitOperation}}</h3>
<hr/>
<form name="fruitForm">
  <input type="hidden" name="" ng-model="fruit.id" />
  <p><label>name</label><input type="text" name="name" ng-model="fruit.name" value="dfgdfgdfg" required="true" /></p>
  <p><label>color</label><input type="text" name="color" ng-model="fruit.color" value="fruit.color" required="true" /></p>
  <hr/>
  <input type="submit" ng-click="save()" value="{{buttonLabel}}" /> <button ng-click="cancel()">Cancel</button>
</form>

感谢您的任何见解或指点。

最佳答案

双向绑定(bind)是指 Controller 范围内发生的更改显示在 View 中，反之亦然。 Angular 对服务器端数据没有任何隐式了解。例如，为了让您的更改显示在另一个打开的浏览器窗口中，您需要有一个通知层，通过长轮询、Web 套接字等将更改推送到客户端。

关于angularjs - 广播模式的改变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14715324/