AngularJS指令隔离范围不更新父

Question

我有一个指令，它有一个模型绑定 2 方式，当通过 ng-click 调用 save() 方法时，父范围不会更新，除非我调用 $scope.$apply() 然后抛出$apply 已经在进行中的错误。

我正在使用 ngResource，事件有一个监听器调用 $scope.model.$save();

有解决办法吗？还是我做错了什么？

.directive('editable', function(){
    return {
        restrict: 'AE',
        templateUrl: '/assets/partials/editable.html',
        scope: {
            value: '=editable',
            field: '@fieldType'
        },
        controller: function($scope){

           ...

            $scope.save = function(){
                $scope.value = $scope.editor.value;
                $scope.$emit('saved');
                $scope.toggleEditor();
            };

        }
    };
})

更新

看起来它毕竟是在更新父级，但在摘要完成之前发射就被触发了。我可以使用 $timeout 将其强制到堆栈的末尾，但感觉有点笨拙。有没有更好的办法？

$scope.$on('saved', function(){
    $timeout(function(){
        $scope.contact.$update();
    }, 0);
});

Answer 1

你如何调用 $scope.save ？如果您使用其中一个 angular 指令，例如 ng-click，angular 会自动为您运行一个摘要循环，因此您不需要调用 $scope.$apply()。在内部，Angular 在开始另一个循环之前检查摘要是否已经在进行中，因此如果您使用其中一个内置指令，它将为您处理已经在进行中的摘要问题。例如，将其放入指令的模板中...

<button ng-click="save()">Save</button>

如果您需要从控制器或链接函数调用保存，您可以做一些小技巧来防止“正在消化”错误。使用 $timeout 服务将调用推迟到调用堆栈的末尾...

$scope.save();
$timeout(function() {
    $scope.$apply();
}, 0);

我们将超时设置为 0，因此没有真正的延迟，但这仍然足以将 $apply 调用推送到当前调用堆栈的末尾，这允许正在进行的摘要首先完成并且防止错误。这并不理想，可能意味着您的设计存在更大的问题，但有时您只需要让它工作