Le formulaire modal ne s'ouvre pas au clic

Question

J'ai le code html suivant dans une tentative d'ouvrir un formulaire modal en cliquant sur un bouton. Le code crée très bien le bouton mais au clic il ne fait rien.

Pourquoi le bouton n'ouvre-t-il pas le formulaire?

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

 
    $scope.items = ['item1', 'item2', 'item3']; 
 

 
    $scope.open = function() { 
 

 
    var modalInstance = $modal.open({ 
 
     templateUrl: 'myModalContent.html', 
 
     controller: ModalInstanceCtrl, 
 
     resolve: { 
 
     items: function() { 
 
      return $scope.items; 
 
     } 
 
     } 
 
    }); 
 

 
    modalInstance.result.then(function(selectedItem) { 
 
     $scope.selected = selectedItem; 
 
    }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date()); 
 
    }); 
 
    }; 
 
}; 
 

 
var ModalInstanceCtrl = function($scope, $modalInstance, items) { 
 

 
    $scope.items = items; 
 
    $scope.selected = { 
 
    item: $scope.items[0] 
 
    }; 
 

 
    $scope.ok = function() { 
 
    $modalInstance.close($scope.selected.item); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $modalInstance.dismiss('cancel'); 
 
    }; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="myModalContent.html"> 
 
    <div class="modal-header"> 
 
     <h3>I'm a modal!</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <ul> 
 
     <li ng-repeat="item in items"> 
 
      <a ng-click="selected.item = item">{{ item }}</a> 
 
     </li> 
 
     </ul> 
 
     Selected: <b>{{ selected.item }}</b> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button class="btn btn-primary" ng-click="ok()">OK</button> 
 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
 
    </div> 
 
    </script> 
 
    <h1>GWAT Websites and Designs</h1> 
 
    <button class="btn" ng-click="open()">Submit new post</button> 
 
</div>

Answer 1

J'ai fait ces changements:

1. comprennent <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
2. ajouter ng-app="plunker"
3. contrôleurs de registre: myMod.controller('ModalDemoCtrl', ModalDemoCtrl); myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
4. Ajouter <p>Selected: {{selected}}</p> pour voir l'élément sélectionné de modal
5. changement $modal-$uibModal et $modalInstance à $uibModalInstance

var myMod = angular.module('plunker', ['ui.bootstrap']); 
 
var ModalDemoCtrl = function($scope, $uibModal, $log) { 
 
    $scope.items = ['item1', 'item2', 'item3']; 
 

 
    $scope.open = function() { 
 
    var modalInstance = $uibModal.open({ 
 
     templateUrl: 'myModalContent.html', 
 
     controller: ModalInstanceCtrl, 
 
     resolve: { 
 
     items: function() { 
 
      return $scope.items; 
 
     } 
 
     } 
 
    }); 
 

 
    modalInstance.result.then(function(selectedItem) { 
 
     $scope.selected = selectedItem; 
 
    }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date()); 
 
    }); 
 
    }; 
 
}; 
 

 
var ModalInstanceCtrl = function($scope, $uibModalInstance, items) { 
 
    $scope.items = items; 
 
    $scope.selected = { 
 
    item: $scope.items[0] 
 
    }; 
 

 
    $scope.ok = function() { 
 
    $uibModalInstance.close($scope.selected.item); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
}; 
 

 
myMod.controller('ModalDemoCtrl', ModalDemoCtrl); 
 
myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script> 
 
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script> 
 

 
<div ng-app='plunker' ng-controller="ModalDemoCtrl"> 
 
    <script type="text/ng-template" id="myModalContent.html"> 
 
    <div class="modal-header"> 
 
     <h3>I'm a modal!</h3> 
 
    </div> 
 
    <div class="modal-body"> 
 
     <ul> 
 
     <li ng-repeat="item in items"> 
 
      <a ng-click="selected.item = item">{{ item }}</a> 
 
     </li> 
 
     </ul> 
 
     Selected: <b>{{ selected.item }}</b> 
 
    </div> 
 
    <div class="modal-footer"> 
 
     <button class="btn btn-primary" ng-click="ok()">OK</button> 
 
     <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
 
    </div> 
 
    </script> 
 
    <h1>GWAT Websites and Designs</h1> 
 
    <p>Selected: {{selected}}</p> 
 
    <button class="btn" ng-click="open()">Submit new post</button> 
 
</div>