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模型变量:

 $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()。

我的问题是，无论我在哪里尝试使用它，我总是收到一条错误消息，指出 apply 已在运行，并且我不知道如何使用它来更新我的文本输入的内容。

Answer 1

$scope.$apply 触发一个 Angular 摘要周期，但由于您的更改发生在 Angular 应用程序内部，因此已经有一个周期正在运行和处理您的数据，这就是您收到该错误的原因，因为您不应该有 2 个周期摘要周期同时执行。当 Angular 环境之外发生某些更改时，$scope.$apply 非常有用。例如，当您需要集成不友好的 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 函数中如何检索和更新范围，如果我不在那里使用 range.$apply() ，则值不会在中表示查看范围，直到发生其他更改并强制进行摘要循环