ui.bootstrap会改变<progress> HTML标记</progress>

Question

在我的HTML文件中，我有一个<progress>标记，我还将ui.bootstrap依赖项注入我的控制器，如下所示：

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

在此配置中，AngularJS将<progress></progress>转换为：

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

当我删除“ui.bootstrap”时，它工作正常。您可以使用this示例JSFiddle。

当progress变成<div class="progress ng-isolate-scope" ng-transclude=""></div>时 它消失了。我知道在ui.bootstrap中有一个名为progress的指令可以进行转换。

那么，我怎样才能使这个进度条工作？或者，如何在不删除依赖项的情况下禁用angular-ui的progress指令？

提前致谢。

Answer 1

我刚遇到同样的问题。一个简单的解决方法是使用ng-non-bindable，这是一个标准的angualr指令。缺点是你不能在progress元素中使用任何角度指令或绑定。

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

Answer 2

我不确定我是否理解您的问题或您正在使用的uiBootstrap版本。

指令应该是：

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

我更改了uiBootstrap的版本，并在此分叉Fiddle中包含了必要的bootstrap.min.css，一切似乎都运行正常。 （看外部资源）