当值从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

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

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

$('#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;
});