模態表單不能打開點擊

Question

我試圖在點擊一個按鈕時打開模態窗體時有以下的角度html。代碼創建按鈕就好，但點擊它不會做任何事情。

爲什麼按鈕不能打開表格？

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

我作出這些變化：

1. 包括<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
2. 添加ng-app="plunker"
3. 寄存器控制器：myMod.controller('ModalDemoCtrl', ModalDemoCtrl); myMod.controller('ModalInstanceCtrl', ModalInstanceCtrl);
4. 添加<p>Selected: {{selected}}</p>查看從模式
5. 變化$modal選擇項目$uibModal和$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>