在角度js中打开模型对话框时出现错误

我的HTML代码如下：

<div ng-controller="bodyController"> 
    <!-- This html would live at the path specified in the controller: path/to/your/modal-template.html --> 
     <button class="btn" ng-click="open()">Open Modal</button> 

    <div modal="showModal" close="cancel()"> 
     <div class="modal-header"> 
      <h4>Modal Dialog</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Example paragraph with some text.</p> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-success" ng-click="ok()">Okay</button> 
     <button class="btn" ng-click="cancel()">Cancel</button> 
     </div> 
    </div> 

    </div>

而且我app.js是这样的：

var app = angular.module("MyApp", ["ui.bootstrap.modal"]); 

app.controller("bodyController", function($scope) { 

    $scope.open = function() { 
    $scope.showModal = true; 
    }; 

    $scope.ok = function() { 
    $scope.showModal = false; 
    }; 

    $scope.cancel = function() { 
    $scope.showModal = false; 
    }; 

});

我在我的index.html file.Still我加角UI引导JS没有得到模型对话框。我收到了一个错误，我正在接受。

我的错误是这样的：

任何人都可以建议我怎么做解决这个错误。

来源

2017-04-11 Manisha Monga

更新错误问题 –

什么错误显示？ –

任何控制台错误？在这里发布 –

这是为引导模态的例子。我觉得你的方式试图在您不使用自举类

有在你的代码相当多的问题做的，所以最好尝试的样品和发展，因为你需要

<button data-toggle="modal" data-target="#test">CLick</button> 
<div class="modal fade" id="test" role="dialog"> 
      <div class="modal-dialog"> 
        <div class="modal-content"> 
        </div> 
      </div> 
</div>

来源

2017-04-11 10:39:03 CrazyMac

低于参考。这会帮助你。

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

 
app.controller("bodyController", function($scope,$uibModal) { 
 

 
    $scope.open = function() {  
 

 
    var modalInstance = $uibModal.open({ 
 
     animation:true, 
 
     ariaLabelledBy: 'modal-title', 
 
     ariaDescribedBy: 'modal-body', 
 
     template: `<div modal="showModal" close="cancel()"> 
 
     <div class="modal-header"> 
 
      <h4>Modal Dialog</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Example paragraph with some text.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-success" ng-click="ok()">Okay</button> 
 
     <button class="btn" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </div>`, 
 
    size: 'sm', 
 
    controller:'modalCtrl', 
 
     resolve: { 
 
     items: function() { 
 
     // return $ctrl.items; 
 
     } 
 
     } 
 
    }); 
 
    modalInstance.result 
 
    .then(function (result) { 
 
      \t console.log('okay'); \t \t \t 
 
\t \t \t }, 
 
\t \t \t function (result) { 
 
\t \t \t \t console.log('cancel'); 
 
\t \t \t }); 
 

 
    }; 
 

 
}); 
 
app.controller('modalCtrl', function($scope,$uibModalInstance){ 
 
$scope.ok = function() { 
 
$uibModalInstance.close(); 
 
}; 
 
$scope.cancel = function() { 
 
    $uibModalInstance.dismiss(); 
 
    }; 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script> 
 
<body ng-app="MyApp"> 
 
<div ng-controller="bodyController"> 
 
    <!-- This html would live at the path specified in the controller: path/to/your/modal-template.html --> 
 
     <button style="margin:20px" class="btn" ng-click="open()">Open Modal</button> 
 

 
    
 

 
    </div> 
 
</body>

来源

2017-04-11 11:16:43

在角度js中打开模型对话框时出现错误

回答

相关问题