AngularJS - 指令范围模型在没有调试器的情况下不会更新答案

【问题标题】：AngularJS - directive scope model doesn't update without debuggerAngularJS - 指令范围模型在没有调试器的情况下不会更新
【发布时间】：2017-01-07 01:02:35
【问题描述】：

为了创建/编辑网站内容，我有一个带有一些选项卡的表单（按钮使选项卡系统的想法，因为用户可能想要添加另一个“选项卡”等），我使用指令来显示选定的标签：

<form name="form" novalidate>
    <div class="tabsContainer">
        <!--some button making the idea of tabs system-->
    </div>

    <div class="contentDataContainer">
        <content-form ng-model="VM.CurrentContent" page-features="VM.PageFeatures"></content-form>
    </div>
</form>

当用户想要编辑内容时，我向网络服务请求内容数据：

loadData = function () {
    var deferred = $q.defer();

    ContentsService.GetContentToCreateEdit({ id: vm.IdContent })
        .then(function(response)
        {
            try {
                if (vm.IdContent <= 0 || (response.ResultOperation === ResultEnum.Success && exists(response.ResultObject.Contents)))
                {
                    vm.Model = ContentVM.GetModelToShow(response.ResultObject.Contents);
                    vm.CurrentContent = vm.Model[0];
                }
                else 
                {
                    //some like with error messages
                }
            }
            catch (err) { }

        deferred.resolve();              
    }, function () {
        deferred.resolve();
    });

    LoadingService.Load(deferred.promise, 'first');
};

并且指令的模型必须更新。

指令控制器：

vm.Model = { Id: 0 };

function init()
{            
    vm.Model = exists($scope.model) ? $scope.model : getDefaultContentInfo(); 

    if(isStringEmpty(vm.Model.Price)) vm.Model.Price = "";
    vm.Model.PriceText = vm.Model.Price;
    vm.Model.IsIntervalDate = !isStringEmpty(vm.Model.EndDate) && vm.Model.EndDate != vm.Model.StartDate;
};

init();

$scope.$watch($scope.model, function () {
    init();
}, true);

如果我在init() 函数中添加debugger，则指令会完美地更新为$scope.model，但如果我没有，它不会...

有人可以解释这里发生了什么，我该如何解决？

我已经尝试使用$scope.$apply()，但出现摘要错误，我已经尝试使用$timeout()，但指令的模型没有更新。

$timeout(function () {
    init();

    $scope.$watch($scope.model, function () {
        init();
    }, true);
},500);

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope

【解决方案1】：

您的vm.Model 可能在您进入init 时未设置。使用调试器，您正在等待足够的时间来设置变量。
如果getDefaultContentInfo() 返回一个promise，您需要做的就是在promise 返回的then 函数中将变量设置为您的数据。

【讨论】：

在 getDefaultContentInfo() 中，我只返回一个类似 return { Id: 0 }; 的对象。我唯一的承诺是在调用指令的控制器视图中，loadData() 在我的问题中显示。这可能是问题吗？ loadData() 中的 $q.defer()？指令中的$scope.$watch() 不应处理该更改？
那就是问题所在。在加载数据之前，您不希望加载 html（使用指令）。我会在 init 函数中调用 loadData() 并在其完成时设置一个变量。然后我会在加载页面之前检查变量ng-if="initDone"
但是$scope.$watch() 不应该处理这个？

【解决方案2】：

实现表单验证后，我需要显示模型错误，问题再次出现。最后经过多次头疼后发现了问题。

在我的$scope.$watch

$scope.$watch($scope.model, function () {
    init();
}, true);

watchExpression必须是幂等的所以我把代码改成这个

$scope.$watch('model', function () {
    init();
}, true);

现在可以工作了！！！

更多文档click here

【讨论】：