Warum öffnet sich Angularjs Bootstrap Modal nicht?

Mein Angularjs Bootstrap Modal öffnet sich nicht.Warum öffnet sich Angularjs Bootstrap Modal nicht?

var app=angular.module('test', ['ui.bootstrap']); 
 
app.controller('ModalDemoCtrl', function($scope, $log,$modal) { 
 
    
 
    $scope.user = { 
 
     user: 'name', 
 
     password: null, 
 
     notes: null 
 
    }; 
 

 
    $scope.open = function() { 
 

 
     $modal.open({ 
 
      templateUrl: 'myModalContent.html', // loads the template 
 
      backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window 
 
      windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template 
 
      controller: function ($scope, $modalInstance, $log, user) { 
 
       $scope.user = user; 
 
       $scope.submit = function() { 
 
        $log.log('Submiting user info.'); // kinda console logs this statement 
 
        $log.log(user); 
 
        $modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason 
 
       } 
 
       $scope.cancel = function() { 
 
        $modalInstance.dismiss('cancel'); 
 
       }; 
 
      }, 
 
      resolve: { 
 
       user: function() { 
 
        return $scope.user; 
 
       } 
 
      } 
 
     });//end of modal.open 
 
    }; // end of scope.open function 
 
\t 
 
\t 
 
});

<html ng-app="test"> 
 
    <head> 
 
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script> 
 
    <!--<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>--> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 
     
 
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 

 
<div ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="myModalContent.html"> 
 
     <div class="modal-header"> 
 
      <h3>I'm a modal!</h3> 
 
     </div> 
 
     <form ng-submit="submit()"> 
 
      <div class="modal-body"> 
 
      <label>User name</label> 
 
      <input type="text" ng-model="user.user" /> 
 
      <label>Password</label> 
 
      <input type="password" ng-model="user.password" /> 
 
      <label>Add some notes</label> 
 
      <textarea rows="4" cols="50" ng-model="user.notes"></textarea> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
 
       <input type="submit" class="btn primary-btn" value="Submit" /> 
 
      </div> 
 
     </form> 
 
    </script> 
 

 
    <button class="btn" ng-click="open()">Open me!</button> 
 
    <div ng-show="selected">Selection from a modal: {{ selected }}</div> 
 
</div> 
 
    </body> 
 
</html>

Wenn ich die Bootstrap-Version 0.6.0 der modale Arbeits fine.But Wenn ich Version verwenden 2.5.0 es gibt mir die Fehlermeldung „Unknown Anbieter: $ modalProvider < - $ modal ". Aber ich muss Version 2.5.0 verwenden. Wie kann ich das Problem lösen? Bitte helfen. Vielen Dank im Voraus.

Quelle

2017-10-05 subhajit maity

In js Teil: plunker here. Nehmen Sie diese beiden Dateien in separaten Ordner, und sicher js machen richtig geladen.

angular.module('plunker', ['ui.bootstrap']); 
var ModalDemoCtrl = function ($scope, $modal, $log) { 

    $scope.user = { 
     user: 'name', 
     password: null, 
     notes: null 
    }; 

    $scope.open = function() { 

     $modal.open({ 
      templateUrl: 'myModalContent.html', // loads the template 
      backdrop: true, // setting backdrop allows us to close the modal window on clicking outside the modal window 
      windowClass: 'modal', // windowClass - additional CSS class(es) to be added to a modal window template 
      controller: function ($scope, $modalInstance, $log, user) { 
       $scope.user = user; 
       $scope.submit = function() { 
        $log.log('Submiting user info.'); // kinda console logs this statement 
        $log.log(user); 
        $modalInstance.dismiss('cancel'); // dismiss(reason) - a method that can be used to dismiss a modal, passing a reason 
       } 
       $scope.cancel = function() { 
        $modalInstance.dismiss('cancel'); 
       }; 
      }, 
      resolve: { 
       user: function() { 
        return $scope.user; 
       } 
      } 
     });//end of modal.open 
    }; // end of scope.open function 
};

IN HTML:

<!doctype html> 
<html ng-app="plunker"> 
    <head> 
    <script src="https://code.angularjs.org/1.2.18/angular.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 
    </head> 
    <body> 

<div ng-controller="ModalDemoCtrl"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3>I'm a modal!</h3> 
     </div> 
     <form ng-submit="submit()"> 
      <div class="modal-body"> 
      <label>User name</label> 
      <input type="text" ng-model="user.user" /> 
      <label>Password</label> 
      <input type="password" ng-model="user.password" /> 
      <label>Add some notes</label> 
      <textarea rows="4" cols="50" ng-model="user.notes"> 

</textarea> 
      </div> 
      <div class="modal-footer"> 
       <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
       <input type="submit" class="btn primary-btn" value="Submit" /> 
      </div> 
     </form> 
    </script> 

    <button class="btn" ng-click="open()">Open me!</button> 
    <div ng-show="selected">Selection from a modal: {{ selected }}</div> 
</div> 
    </body> 
</html>

Quelle

2017-10-05 19:27:45

Eigentlich habe ich meine nicht it.You ui-Bootstrap-TPLS-0.6.0.js verwenden. Verwenden Sie diese js-Version in Plunker sowie Ihren Code wie erwartet ausgeführt. Aber wenn Sie verwenden anstatt derselbe Code, der den Fehler angibt. Ich muss den UI-bootstrap-tpls-2.5.0.js –

Man verwenden, überprüfen Sie die js-Priorität von js –

Warum öffnet sich Angularjs Bootstrap Modal nicht?

Antwort

Verwandte Themen