javascript - 具体 $scope.apply();场景 :

Question

我是 Angular 的新手，我一直在尝试了解它的工作原理。我正在制作一个简单的应用程序，其中有人可以通过简单的 html 界面添加用户并使用 SQLite 将其存储在数据库中，然后他们可以编辑或删除它们。

所以我试图理解 $scope.apply() 的手动使用，所以我做了以下操作来创建一个我需要使用它的场景:

在一个函数中，我将一些变量存储在 localStorage 中，然后我手动打开一个 html:

 localStorage.setItem('idUsuario',response.records[0].idUsuario);
    localStorage.setItem('dato_Nombre',response.records[0].nombre);
    localStorage.setItem('dato_ApPat',response.records[0].apPat);
    localStorage.setItem('dato_ApMat',response.records[0].apMat);
    localStorage.setItem('dato_Direccion',response.records[0].direccion);
    localStorage.setItem('dato_Tel',response.records[0].telefono);
    localStorage.setItem('dato_email',response.records[0].correo);
    //debugger;
    location.href = "editClient.html";}

在我打开的 html 上，我在我的 Controller 中声明了一个 ng-init()，它接收存储的数据并将其分配给我在一些文本输入上声明的 ng-model 变量:

 $scope.init = function () {
    $scope.idUsuario=localStorage.getItem("idUsuario");
    $scope.dato_Nombre=localStorage.getItem("dato_Nombre");
    $scope.dato_ApPat=localStorage.getItem("dato_ApPat");
    $scope.dato_ApMat=localStorage.getItem("dato_ApMat");
    $scope.dato_Tel=localStorage.getItem("dato_Tel");
    $scope.dato_Direccion=localStorage.getItem("dato_Direccion");
    $scope.dato_email=localStorage.getItem("dato_email");

    localStorage.clear();
}



<div class="list">
            <label class="item item-input item-stacked-label">
                <span class="input-label" >Nombre</span>
                <input type="text" placeholder="Escriba su nombre" ng-model="dato_Nombre" >
            </label>
            <label class="item item-input item-stacked-label">
                  <span class="input-label">Apellido Paterno</span>
                <input type="text" placeholder="Escriba su apellido paterno" ng-model="dato_ApPat">
            </label>
            <label class="item item-input item-stacked-label">
                  <span class="input-label">Apellido Materno</span>
                <input type="text" placeholder="Escriba su apellido materno" ng-model="dato_ApMat">
            </label>
            <label class="item item-input item-stacked-label">
                  <span class="input-label">Dirección</span>
                <input type="text" placeholder="Escriba su dirección" ng-model="dato_Direccion">
            </label>
          <label class="item item-input item-stacked-label">
            <span class="input-label">Teléfono</span>
            <input type="text" placeholder="Escriba su teléfono" ng-model="dato_Tel">
          </label>
          <label class="item item-input item-stacked-label">
                  <span class="input-label">Email</span>
              <input type="text" placeholder="Escriba su correo" ng-model="dato_email">
            </label> 
        <center>
          <button class="button button-possitive" ng-click="editarCliente()">Actualizar</button>
        </center>    
        </div>

因此，当表单加载时，输入实际上填充了我从 localStorage 带来的数据，然后我通过键入其他内容来修改该文本，并调用一个函数返回每个 ng-model 中的数据，正如预期的那样，具有未更新为我在输入中键入的内容，并且仍然具有从 localStorage 分配的数据，因此需要使用 $scope.apply()。

我的问题是，无论我在哪里尝试使用它，我总是会收到一条错误消息，说应用程序已经在运行，而且我无法弄清楚如何使用它来更新我的文本输入的内容。

Answer 1

$scope.$apply 触发一个 Angular 摘要循环，但由于您的更改发生在 Angular 应用程序内部，因此已经有一个循环在运行并处理您的数据，这就是为什么会出现该错误，因为您不应该有 2摘要循环同时执行。 $scope.$apply 在 Angular 环境之外发生一些变化时很有用。例如，当您需要集成不友好的 Angular 组件(如 jquery 插件或其他在 Angular 世界之外处理事件的 ui 元素)时。如果您想从任何这些元素事件中更新 Angular 应用程序，您需要使用 $scope.$apply，如果您选择使用 setTimeout 或 setInterval 而不是为 Angular 提供的 $timeout 或 $interval 服务，也会发生这种情况，因为函数的执行会发生在 Angular 摘要周期之外。

$.ajax({
 url:'http://lslsls.com',
 method: 'get'
})
.success(function(data){
  var scope = angular.element($('#elementId')).scope();
  scope.returnedData=data;
  scope.$apply();
});

不要过多关注 jquery 部分，但请注意在 success 函数中如何检索和更新范围，如果我不在那里使用 scope.$apply() ，则值不会在查看范围，直到发生其他更改并强制执行摘要循环