当值从 iframe 更改时，范围不更新

Question

我有一个包含在 iframe 中的图像选择器。图片选择器使用 ng-model 值 {{ post.image }} 更新输入字段，如下所示：

<input required type="text" id="image" name="image" placeholder="Competition image" ng-model="post.image"/>

输入字段从 iframe 中更新，如下所示：

$('#image', window.parent.document).val(img);

输入的值会改变，但范围值不会改变。

我尝试过使用 $watch 但这似乎只适用于实际的按键更改

Answer 1

由于您直接通过第三方库更新输入字段的值，因此不会触发任何事件，并且 angular 不知道值已更改。

您需要在元素上显式触发更改事件。

$('#image', window.parent.document).trigger('change');

更简洁的方法可能是拥有一个直接更新范围的函数，而不是输入字段。由于事件是由控制器之外的东西触发的，因此最简单的方法可能是在根范围内触发事件。

不幸的是，跨 iframe 执行此操作可能比它的价值更痛苦。如果你想尝试一下，你需要做这样的事情。

$rootScope = angular.element(window.parent.document).injector().get('$rootScope')

$rootScope.$broadcast('setImage', value);

然后在你的控制器中

$scope.$on('setImage', function(event, value){
    $scope.post.image = value;
});