Javascript 当值从iframe更改时，作用域不更新

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

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

输入的值不会更改，但范围值不会更改

---

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

，因为您直接通过第三方库更新输入字段的值，不会触发任何事件，并且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;
});

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