Angularjs - ng-disabled không hoạt động như mong đợi

Question

Tôi đang cố gắng vô hiệu hóa tệp input thẻ, sau khi người dùng đã chọn tệp.

HTML:

<div ng-controller='firstController'> 
    <div ng-controller='secondController'> 
     <input type="file" name="file" upload class="theFileInput" ng-disabled="fileInMemory"> 
    </div> 
</div> 

JS, đầu tiên điều khiển:

$scope.fileInMemory = false; // tracks if user selected a file for upload, but didn't upload it 
$rootScope.$on('fileAdded', function() { 
    $scope.fileInMemory = true; 
    console.log($scope.fileInMemory); 
}); 

upload là một chỉ thị.

Ngày tải trang, ng-disabled có false như mong muốn, khi fileInMemory được thay đổi, input thẻ vẫn không bị vô hiệu hóa. console.log cho thấy rằng giá trị của fileInMemory đang thay đổi theo ý muốn.

gì tôi đã cố gắng cho đến nay

<input type="file" name="file" class="theFileInput" ng-disabled="'fileInMemory'"> 

Chỉ cần vô hiệu hóa lĩnh vực này ngay lập tức, khi fileInMemory là falsy.

<input type="file" name="file" class="theFileInput" ng-disabled="fileInMemory == 'true'"> 

Không hoạt động.

<input type="file" name="file" class="theFileInput" ng-disabled="{{fileInMemory}}"> 

Vẫn không hoạt động.

Cách tốt nhất để vô hiệu hóa thẻ input là gì?

Tìm thấy vấn đề

Dường như vấn đề ở đây là phạm vi. Tôi có firstController với 'phạm vi, bên trong nó secondController với' phạm vi và trên input thẻ chỉ thị upload, điều này dường như tạo ra phạm vi của riêng nó và không thấy phạm vi firstController.

secondController và upload là bộ điều khiển chung và do đó không được kế thừa từ firstController.

Tôi đoán giải pháp tốt nhất của tôi là thêm một số trình xử lý chung trong secondController, dựa trên thuộc tính bổ sung trên trường input sẽ vô hiệu hóa nó khi cần.

Answer 1

Bạn sẽ phải tận dụng $apply ở đây vì nó đang được thay đổi bên trong của sự kiện:

$scope.fileInMemory = false; 
$rootScope.$on('fileAdded', function() { 
    $scope.$apply(function() { 
     $scope.fileInMemory = true; 
     console.log($scope.fileInMemory); 
    }); 
}); 

CẬP NHẬT : để trả lời các vấn đề gây ra phạm vi phân lập, di chuyển fileInMemory đến $rootScope:

$rootScope.fileInMemory = false; 
$rootScope.$on('fileAdded', function() { 
    $rootScope.$apply(function() { 
     $rootScope.fileInMemory = true; 
     console.log($scope.fileInMemory); 
    }); 
}); 

Answer 2

bạn đã cố gắng như thế này

<input type="file" name="file" class="theFileInput" ng-disabled="fileInMemory"> 

đây là một ví dụ làm việc demo

Answer 3

Hãy thử sau

ng-disabled="fileInMemory" 

Answer 4

Sử dụng khốn khổ thay vì loại nguyên thủy.

Trong bộ điều khiển đầu tiên:

$scope.model = {}; 
$scope.model.fileInMemory = false; 
$rootScope.$on('fileAdded', function() { 
     $scope.model.fileInMemory = true; 
     console.log($scope.model.fileInMemory); 
    }); 

---

<div ng-controller='firstController'> 
    <div ng-controller='secondController'> 
     <input type="file" name="file" class="theFileInput" ng-disabled="model.fileInMemory"> 
    </div> 
</div> 

Answer 5

Nếu vấn đề là với phạm vi, hãy thử sử dụng "điều khiển là" cú pháp:

<div ng-controller='firstController as first'> 
    <div ng-controller='secondController as second'> 
     <input type="file" name="file" upload class="theFileInput" ng-disabled="first.fileInMemory"> 
    </div> 
</div> 

Link: AngularJs "controller as" syntax - clarification?

Answer 6

Mô hình của bạn đã được thay đổi trên giao diện điều khiển nhưng không theo quan điểm vì thay đổi này đang diễn ra bên ngoài ứng dụng góc cạnh. Cách khắc phục nó là gọi $ áp dụng trên $ rootScope để đảm bảo rằng các khung nhìn được cập nhật của sự kiện này được gọi từ phạm vi ứng dụng góc bên ngoài.

// Something like this 
$rootScope.$apply(function() { 
    $rootScope.fileInMemory = true; 
    // Now it'll be changed in views too 
}); 

Answer 7

bạn đã thử điều này:

HTML:

<div ng-controller='firstController'> 
    <div ng-controller='secondController'> 
     <input type="file" name="file" upload class="theFileInput" ng-disabled="fileInMemory.disabled"> 
    </div> 
</div> 

Bộ điều khiển:

$scope.fileInMemory = { disabled: false }; 

$rootScope.$on('fileAdded', function() { 
    $scope.fileInMemory.disabled = true; 
    console.log($scope.fileInMemory); 
}); 

Working fiddle here

Answer 8

Tóm tắt, mỗi ngController tạo phạm vi con mới. Phạm vi được tạo bởi secondController làm tối giá trị của fileInMemory từ firstController. Bởi vì điều này, thay đổi không lan truyền và giá trị của nó là bị khóa đến false. Điều này có thể dễ dàng tránh được bằng cách sử dụng cú pháp controllerAs.