當值從iframe更改時，範圍不會更新

Question

我有一個包含在iframe中的圖像選擇器。圖片選擇器更新的輸入欄用NG-模型值{{post.image}}像這樣：

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

輸入場從iframe中更新像這樣：

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

的輸入的值確實會改變，但範圍值不會。

我使用$腕錶嘗試，但這個似乎只對實際按鍵改變工作

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; 
});