AngularJS按鈕單擊打開模式

我正試圖學習在AngularJS中單擊按鈕時打開模式對話框，但無法這樣做。我檢查了Chrome控制檯，但沒有錯誤。此外，由於我正在學習AngularJS，因此請在Chrome控制檯沒有顯示任何錯誤時提出建議。AngularJS按鈕單擊打開模式

這裏是我的代碼

<html ng-app="MyApp"> 
<head> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<link rel="stylesheet" href="css/bootstrap.min.css" /> 

<script type="text/javascript"> 
    var myApp = angular.module("MyApp", []); 
    myApp.controller('MyController', function ($scope) { 

     $scope.open = function() { 
      $scope.showModal = true; 
     }; 

     $scope.ok = function() { 
      $scope.showModal = false; 
     }; 

     $scope.cancel = function() { 
      $scope.showModal = false; 
     }; 
    }); 
</script> 
</head> 
<body ng-controller="MyController"> 

    <button class="btn btn-primary" ng-click="open()">Test Modal</button> 

    <!-- Confirmation Dialog --> 
    <div class="modal" modal="showModal" close="cancel()"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title">Delete confirmation</h4> 
      </div> 
      <div class="modal-body"> 
      <p>Are you sure?</p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">No</button> 
      <button type="button" class="btn btn-primary" ng-click="ok()">Yes</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- End of Confirmation Dialog --> 

</body> 
</html>

來源

2015-04-28 blue piranha

，因爲你正在使用角度和引導我將在這裏使用的模態形式：http://angular-ui.github.io/bootstrap/ – Jax

在這裏，你有一個簡單的[示例]（http://jsfiddle.net/dwmkerr/8MVLJ/）如何使用modal with angularjs –

你應該看看Batarang爲AngularJS調試

至於你的問題：

你的範圍變量不直接連接到模態正常。以下是調整後的代碼。您需要指定當模式顯示了使用ng-show

<!-- Confirmation Dialog --> 
<div class="modal" modal="showModal" ng-show="showModal"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h4 class="modal-title">Delete confirmation</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Are you sure?</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cancel()">No</button> 
     <button type="button" class="btn btn-primary" ng-click="ok()">Yes</button> 
     </div> 
    </div> 
    </div> 
</div> 
<!-- End of Confirmation Dialog -->

來源

2015-04-28 13:55:16

對不起，但這段代碼似乎不工作。我們是否錯過了這裏的其他東西？ –

是的，將showModal聲明爲$ scope函數之外的變量調用 –

我不知道，你是如何打開彈出窗口或在代碼中說的模型。但你可以嘗試這樣的事情..

<html ng-app="MyApp"> 
<head> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<link rel="stylesheet" href="css/bootstrap.min.css" /> 

<script type="text/javascript"> 
    var myApp = angular.module("MyApp", []); 
    myApp.controller('MyController', function ($scope) { 
     $scope.open = function(){ 
     var modalInstance = $modal.open({ 
         templateUrl: '/assets/yourOpupTemplatename.html', 
         backdrop:'static', 
         keyboard:false, 
         controller: function($scope, $modalInstance) { 
          $scope.cancel = function() { 
           $modalInstance.dismiss('cancel'); 
          }; 
          $scope.ok = function() { 
           $modalInstance.close(); 
          }; 
         } 
        }); 
     } 
    }); 
</script> 
</head> 
<body ng-controller="MyController"> 

    <button class="btn btn-primary" ng-click="open()">Test Modal</button> 

    <!-- Confirmation Dialog --> 
    <div class="modal"> 
     <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
      <h4 class="modal-title">Delete confirmation</h4> 
      </div> 
      <div class="modal-body"> 
      <p>Are you sure?</p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-default" ng-click="cancel()">No</button> 
      <button type="button" class="btn btn-primary" ng-click="ok()">Yes</button> 
      </div> 
     </div> 
     </div> 
    </div> 
    <!-- End of Confirmation Dialog --> 

</body> 
</html>

來源

2015-04-28 14:09:40 Ritesh

ReferenceError：$ modal未定義 –

是的，在控制器中注入$ modal服務。 – Ritesh

https://angular-ui.github.io/bootstrap/使用這個引導庫，它兼容它與angular兼容，搜索$ modal。 – Ritesh

希望這會幫助你。

下面是HTML代碼： -

<body> 
    <div ng-controller="MyController" class="container"> 
     <h1>Modal example</h1> 
     <button ng-click="open()" class="btn btn-primary">Test Modal</button> 

     <modal title="Login form" visible="showModal"> 
     <form role="form"> 

     </form> 
     </modal> 
    </div> 
</body>

AngularJs代碼： -

var mymodal = angular.module('mymodal', []); 

mymodal.controller('MyController', function ($scope) { 
    $scope.showModal = false; 
    $scope.open = function(){ 
    $scope.showModal = !$scope.showModal; 
    }; 
    }); 

mymodal.directive('modal', function() { 
    return { 
     template: '<div class="modal fade">' + 
      '<div class="modal-dialog">' + 
      '<div class="modal-content">' + 
       '<div class="modal-header">' + 
       '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' + 
       '<h4 class="modal-title">{{ title }}</h4>' + 
       '</div>' + 
       '<div class="modal-body" ng-transclude></div>' + 
      '</div>' + 
      '</div>' + 
     '</div>', 
     restrict: 'E', 
     transclude: true, 
     replace:true, 
     scope:true, 
     link: function postLink(scope, element, attrs) { 
     scope.title = attrs.title; 

     scope.$watch(attrs.visible, function(value){ 
      if(value == true) 
      $(element).modal('show'); 
      else 
      $(element).modal('hide'); 
     }); 

     $(element).on('shown.bs.modal', function(){ 
      scope.$apply(function(){ 
      scope.$parent[attrs.visible] = true; 
      }); 
     }); 

     $(element).on('hidden.bs.modal', function(){ 
      scope.$apply(function(){ 
      scope.$parent[attrs.visible] = false; 
      }); 
     }); 
     } 
    }; 
    });

檢查this-- jsfiddle

來源

2015-10-13 05:47:55

非常好。謝謝。 –

當我點擊「Test Modal」時，沒有任何反應。不會出現模式，並且在控制檯日誌中沒有錯誤。這是否發生在其他人身上？ – truffle

@truffle Safari中沒有任何反應 – Tamara

集jQuery的範圍

$scope.$ = $;

並調用HTML

ng-click="$('#novoModelo').modal('show')"

來源

2017-08-10 18:56:03 jalescardoso

AngularJS按鈕單擊打開模式

回答

相關問題