【问题标题】:AngularJS UI-Bootstrap Modal is not showingAngularJS UI-Bootstrap 模式未显示
【发布时间】:2022-01-26 17:14:29
【问题描述】:

我们必须更新 Bootstrap 版本(bs3 到 bs4)。我们对 Angularjs modal 有一些问题。它仅适用于 bs3.4.1 版本,甚至不适用于 3.4.2。下面是一段类似的代码,问题是, 看起来模板已添加到 dom,但模态不会出现并且表现得像模态。我怎么解决这个问题。任何帮助将不胜感激。

<html>
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.js"></script>       
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>               
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" />     
        
        <script type="text/javascript">
          
            var app = angular.module("app", ['ui.bootstrap']);
app.controller("democontroller", ["$scope", "$modal", function($scope, $uibModal){
    $scope.click = function(){
   $uibModal.open({
      templateUrl: "modal.html",
      controller: "modal",
      scope: $scope
    });
  }
}]);

app.controller("modal", modal);

function modal() {
    console.log("in modal controller")
}

        </script>
    </head>
<body>
    <div ng-app="app" ng-controller="democontroller">
        <button type="button" class="btn btn-default" ng-click="click()">
          Open modal
        </button>
      <script type="text/ng-template" id="modal.html">
          <h1>modal</h1>
      </script>
      </div>
</body>
</html>

【问题讨论】:

    标签: angularjs bootstrap-modal angular-ui-bootstrap


    【解决方案1】:

    如果您将样式链接更改为此(在下面的阴影区域中),模式应该可以工作。我从这里得到链接仅供参考: https://getbootstrap.com/docs/3.3/getting-started/

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    

    【讨论】:

    • 感谢@Gerald 的回答,我按照此步骤操作,它成功了。 link
    猜你喜欢
    • 2014-07-11
    • 1970-01-01
    • 2017-09-20
    • 2018-08-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多