Question

我正在尝试建立一个小POC，看看角度是否适用于我正处于中间位置的东西。

我设置了一个REST服务器，我能够通过角度CRUD。但是，由于文档和教程都是如此（读取：SUPER不一致），我不确定我没有看到的行为是不正确的代码的结果，或者我不能做这样的事情。

我从文档中收集到双向绑定可用，但目前尚不清楚它是如何工作的。 NB我已经阅读了几十篇文章，解释它是如何在低级别'https://stackoverflow.com/a/9693933/2044377中起作用的，但却未能回答我自己的问题。

我对一个修改sql db的REST服务有兴趣。

我想知道的是，并且我正在尝试POC，如果我打开了2个浏览器并且我在数据库中更改了一个值，它会反映在其他浏览器窗口中吗？

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

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'];

list.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>

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

Answer 1

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

广播模式的变化

app.js

controllers.js

list.html

的index.html

form.html

1 个答案: