角度jsでモデルダイアログを開くときにエラーが発生する

私のプロジェクトにモデルダイアログを追加したいと思います。角度jsでモデルダイアログを開くときにエラーが発生する

<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は、このようなものです：：

私のhtmlコードは次のようである、私は私が私のindex.html file.Stillに角度UIブートストラップ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; 
    }; 

});

モデルダイアログが表示されません。私は私が得ているエラーを取得しています。

私のエラーは次のようである：

誰もがこのエラーを解決行う方法を私はお勧めできます。

出典

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でモデルダイアログを開くときにエラーが発生する

答えて

関連する問題