javascript - 如何解决 Angular 列表的 bootstrap.js 和 angularjs 之间的冲突

Question

这是我的html代码

<div class="form-group">

     <select ng-model="modSelectedState" id="selectState" name="selectState"
          ng-options="state as state.full_name for state in states">
          <option value="">Select State...</option>                                         </select>
     </div><!-- /.form-group -->

它按预期呈现，直到我将此行添加到我的代码中:

 <script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>

此时我在渲染页面时看到的都是默认选项(“选择状态”)。当我删除 bootstrap.js 时，一切都按预期呈现 - 即我看到了所有状态的列表。

这是我在 Controller 中加载代码的方式

 $http.get('./data/states.js').success(function (data) {
        $scope.states = data.locations;
    });

states.js 存储在本地。

我在页面上还有一些其他 Angular 元素，它们都工作正常。我还尝试使用加载顺序(即在 Angular 之前加载 Bootstrap ，反之亦然)但结果是相同的 - 列表在没有 Bootstrap 的情况下呈现良好并且它不使用 Bootstrap 呈现。

在绑定(bind)列表方面，这两个库之间是否存在任何已知的冲突？有任何已知的解决方法吗？

Answer 1

您需要使用 controls specially prepared to work with bootstrap and angular ... 否则，您不仅会遇到此类意外问题，而且还会遇到其他类型的问题，因为您在已经存在使用 javascript 库的经过验证的方法时尝试进行自己的实现。最好的问候。