在Firefox中只更新父級隔離作用域

我試圖在子自定義指令中觸發onchange事件時更新父級作用域變量。我在使用兒童指令（input文件）中使用的事件是由jqLite觸發的onchange。這意味着，在角度範圍外操作。爲了更新範圍，我使用scope.$evalAsync函數（也嘗試了$timeout和scope.$apply）。在父母定製指令中，我使用$watch函數作爲偵聽器。在Firefox中只更新父級隔離作用域

請大家在jsfiddle完整的例子來看看

標記

<div ng-app='myApp'> 
    <parent></parent> 
</div>

腳本

var myApp = angular.module('myApp', []); 

myApp.directive('parent', function() { 

    return { 
    restrict: 'E', 
    template: '<div class="parent">Parent' + '<span class="file-name">{{selectedFileName}}</span>' + '<child files="files"></child>' + '</div>', 
    scope: { 
     files: '=' 
    }, 
    link: function(scope){ 
     scope.$watch('files', function(newVal) { 
     if (newVal && newVal.length > 0) { 
      scope.selectedFileName = "selected file name: " + newVal[0].name; 
     } 
     }); 
    } 
    }; 
}); 

myApp.directive('child', function() { 

    return { 
    restrict: 'E', 
    template: '<div class="child">Child<br />' + '<span class="file-name">{{selectedFileName}}</span>' + '<file-upload files="files"></file-upload>' + '</div>', 
    scope: { 
     files: '=' 
    }, 
    link: function(scope) { 
     scope.$watch('files', function(newVal) { 
     if (newVal && newVal.length > 0) { 
      scope.selectedFileName = "selected file name: " + newVal[0].name; 
     } 
     }); 
    } 
    }; 
}); 

myApp.directive('fileUpload', function() { 

    return { 
    restrict: 'E', 
    template: '<input type="file" />', 
    scope: { 
     files: '=' 
    }, 
    link: function(scope, element) { 
     element.bind('change', function(e) { 
     scope.$evalAsync(function() { 
      scope.files = (e.srcElement || e.target).files; 
     }); 
     }); 
    } 
    }; 
});

在這個例子中，每次我選擇新文件的時間，父母範圍變量files ar e完美更新，並調用其$watch函數。

問題是，在Firefox的父母範圍$watch函數只被調用一次。只在第一次。

在此先感謝

來源

2016-08-05 shimiz

解決。

感謝這post，它指出我的問題是我正在使用$watch。

根據下面的解釋：

默認情況下，$watch不檢查對象平等，但只是參考

對我來說，我在看一個數組。它的參考沒有改變，這就是爲什麼沒有調用$watch函數。實際上發生了什麼變化，它只是數組的內部屬性。因此，解決方案是使用$watchCollection()代替，其中：

淺手錶的對象的屬性和火災每當任何的屬性改變......對於陣列，這意味着觀看數組項

爲什麼$watch在Firefox中不起作用，但在Chrome和IE中很好地工作？答案關於文件輸入change事件的執行。即使上傳相同的文件，Firefox始終會觸發change事件。這是而不是在Chrome和IE中的行爲。因此，Firefox顯然在每個change事件中保持相同的files數組對象，並且只更改其內部項目。Chrome和IE顯然會在每個change事件中創建新的files對象，但在上傳具有相同名稱的文件時不會觸發事件。

來源

2016-08-08 18:05:00 shimiz

在Firefox中只更新父級隔離作用域

回答

相關問題