ui.bootstrap biến dạng thẻ <progress> HTML

Question

Trong tập tin HTML của tôi, tôi có một thẻ <progress> và tôi cũng tiêm các ui.bootstrap phụ thuộc vào bộ điều khiển của tôi như sau:

var myApp = angular.module("myApp",["ui.bootstrap"]); 

Trong cấu hình này, AngularJS chuyển đổi <progress></progress> thành:

<div class="progress ng-isolate-scope" ng-transclude=""></div> 

Khi tôi xóa "ui.bootstrap", nó hoạt động tốt. Bạn có thể chơi với this mẫu JSFiddle.

Khi progress biến thành <div class="progress ng-isolate-scope" ng-transclude=""></div> nó biến mất. Tôi hiểu rằng có một chỉ thị được gọi là progress trong ui.bootstrap thực hiện chuyển đổi này.

Vì vậy, làm cách nào để thanh tiến trình này hoạt động? Hoặc, làm thế nào tôi có thể vô hiệu hóa các chỉ thị progress của angular-ui mà không loại bỏ sự phụ thuộc?

Xin cảm ơn trước.

Answer 1

Tôi không chắc chắn nếu tôi hiểu câu hỏi của bạn hoặc phiên bản uiBootstrap nào bạn đang sử dụng.

Chỉ thị nên là:

<div ng-controller="MainCtrl"> 
     <progressbar value="55"></progressbar> 
</div> 

Tôi đã thay đổi phiên bản của uiBootstrap và bao gồm việc cần thiết bootstrap.min.css trong này chia hai Fiddle và mọi thứ dường như làm việc tốt. (xem các tài nguyên bên ngoài)

Answer 2

Tôi vừa gặp vấn đề tương tự. Cách giải quyết đơn giản là sử dụng ng-non-bindable, đó là một chỉ thị angualr chuẩn. Hạn chế là bạn không thể sử dụng bất kỳ chỉ thị góc cạnh nào hoặc các ràng buộc trong phần tử tiến trình.

<progress ng-non-bindable></progress>