Modal Formular nicht auf Klick öffnen

Question

Ich habe die folgenden eckigen HTML in einem Versuch, ein modales Formular beim Klicken auf eine Schaltfläche zu öffnen. Der Code erzeugt den Button gut, aber beim Klicken macht er nichts.

Warum öffnet der Button das Formular nicht?

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

machte ich diese Änderungen:

1. umfassen <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
2. ng-app="plunker"
3. Registerregler hinzufügen: myMod.controller('ModalDemoCtrl', ModalDemoCtrl); myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
4. <p>Selected: {{selected}}</p> hinzufügen ausgewähltes Element aus modal
5. ändern $modal-$uibModal und $modalInstance zu $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>