Question

我的Angular应用程序有两个使用相同控制器和部分的路由。控制器和部分基于所使用的路径以非常不同的方式表现，因此它们共享相同代码的原因。这些是路线：

$routeProvider.when('/join', {templateUrl: '/partials/global-shared/join.html', controller: HouseJoinController});
$routeProvider.when('/join/:code', {templateUrl: '/partials/global-shared/join.html', controller: HouseJoinController});

然后，在控制器中，我正在检查是否提供了代码并进行API调用并根据API的结果更新模型：

if ($routeParams.code) {
    API.post('signUp', 'invitedClient', 'getTenantDetails', {code: $routeParams.code}, function(result) {
        $scope.firstName = result.client.firstName;
    });
}

最后，我的partial有一个输入元素，使用$scope.firstName绑定到ng-model：

<input type="text" name="firstName" ng-model="firstName" ng-pattern="/^[a-zA-Z-']+[ ]?[a-zA-Z-']+$/" required>

当我使用提供的代码加载页面时，我可以看到API调用及其在Chrome的开发人员工具中返回的结果，并且我已经验证$scope.firstName正在使用API的结果进行更新console.log()它。

但是，它没有在input元素中更新。甚至更奇怪的是，如果我在输入元素之前{{ firstName }}，我可以看到输出正确的firstName模型。

因此模型正在更新，Angular知道它的新值，因为它可以将其打印到页面，但它不会更新输入值。

我也尝试在API回调函数中使用$scope.$apply()，如下所示：

if ($routeParams.code) {
    API.post('signUp', 'invitedClient', 'getTenantDetails', {code: $routeParams.code}, function(result) {
        $scope.$apply(function() {
            $scope.firstName = result.client.firstName;
        });
    });
}

但Angular会抛出错误说：Error: [$rootScope:inprog]。

Answer 1

我认为这是与javascript原型继承相关的问题。我建议你在$ scope中使用包含你的属性的对象。请阅读此documentation以获得更好的解释。你可以读到这个：

通过遵循以下内容，可以轻松避免使用原语这个问题   “最佳实践”总是有'。'在您的ng模型中 - 观看3   分钟值得。 Misko演示了原始绑定问题   NG-开关。

拥有'。'在你的模型中将确保原型继承   在游戏中。所以，使用
  <input type="text" ng-model="someObj.prop1">   宁   比
  <input type="text" ng-model="prop1">。

Answer 2

什么是API？

如果您使用Angular的$http服务之外的其他内容，Angular无法知道您的模型是异步更新的。

所以，如果你

，你可能不需要$apply()

使用$http服务
在$q方法中使用API.post来解决/拒绝回复。

此外，您可以尝试编写这样的$ apply（根据docs，scope传递给函数）：

$scope.$apply(function(scope) {
  scope.firstName = result.client.firstName;
});

并且，如上所述，最佳做法是在$scope上使用实例对象而不是基元来避免$scope继承问题：

$scope.client = receivedClient;

和

ng-model="client.firstName"

需要的地方

Angular不根据模型值更新输入值

2 个答案: