使用Angular JS的簡單彈出菜單

我是使用AngularJS的新手。我有4個按鈕取消，拒絕，成功&刪除。如果我點擊任何按鈕，我想顯示多個信息，即如果我點擊取消，然後顯示消息顯示您點擊取消按鈕&等。使用Angular JS的簡單彈出菜單

我有從下面的鏈接，但簡單的警報&在這個例子中沒有使用控制器。

我想要一個模棱兩可的指導例子，所以我可以理解。我試圖谷歌它，但沒有發現簡單的例子。

請幫忙。謝謝

<!doctype html> 
<html ng-app="mymodal"> 


<body> 

<div ng-controller="MainCtrl" class="container"> 
    <button ng-click="toggleModal('Success')" class="btn btn-default">Success</button> 
    <button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button> 
    <button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button> 
    <button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button> 
    <modal visible="showModal"> 
     Any additional data/buttons 
    </modal> 
</div> 

     <!-- Scripts --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"></script> 


    <!-- App --> 
    <script> 
     var mymodal = angular.module('mymodal', []); 

mymodal.controller('MainCtrl', function ($scope) { 
    $scope.showModal = false; 
    $scope.buttonClicked = ""; 
    $scope.toggleModal = function(btnClicked){ 
     $scope.buttonClicked = btnClicked; 
     $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">{{ buttonClicked }} clicked!!</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.$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; 
      }); 
     }); 
     } 
    }; 
    }); 




    </script> 
</body> 
</html> 

Link : http://plnkr.co/edit/?p=preview

來源

2014-12-11 veera

你的意思角模式？ – Ved 2014-12-11 05:42:25

我想要一個簡單的例子，如一個HTML文件，其中包含HTML數據和其他文件，其中包含彈出數據。通過點擊這些按鈕，多個消息在彈出窗口中顯示。 – veera 2014-12-11 05:45:43

使用此作爲參考http://jsfiddle.net/alexsuch/RLQhh/ – syarul 2014-12-11 06:12:01

使用syarul的jsFiddle鏈接建立一個模式彈出的例子。這裏是更新的fiddle。

創建一個稱爲模態的角度指令並用於html。說明： -

HTML

<div ng-controller="MainCtrl" class="container"> 
    <button ng-click="toggleModal('Success')" class="btn btn-default">Success</button> 
    <button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button> 
    <button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button> 
    <button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button> 
    <modal visible="showModal"> 
     Any additional data/buttons 
    </modal> 
</div>

在按鈕點擊toggleModal（）函數被調用按鈕消息作爲參數。此功能切換彈出窗口的可見性。由於ng-transclude放置在指令模板的模態體中，因此您放入的任何標籤都將作爲內容顯示在彈出窗口中。

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

mymodal.controller('MainCtrl', function ($scope) { 
    $scope.showModal = false; 
    $scope.buttonClicked = ""; 
    $scope.toggleModal = function(btnClicked){ 
     $scope.buttonClicked = btnClicked; 
     $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">{{ buttonClicked }} clicked!!</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; 
      }); 
     }); 
     } 
    }; 
    });

UPDATE

<!doctype html> 
<html ng-app="mymodal"> 


<body> 

<div ng-controller="MainCtrl" class="container"> 
    <button ng-click="toggleModal('Success')" class="btn btn-default">Success</button> 
    <button ng-click="toggleModal('Remove')" class="btn btn-default">Remove</button> 
    <button ng-click="toggleModal('Deny')" class="btn btn-default">Deny</button> 
    <button ng-click="toggleModal('Cancel')" class="btn btn-default">Cancel</button> 
    <modal visible="showModal"> 
     Any additional data/buttons 
    </modal> 
</div> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
     <!-- Scripts --> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> 

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 

    <!-- App --> 
    <script> 
     var mymodal = angular.module('mymodal', []); 

mymodal.controller('MainCtrl', function ($scope) { 
    $scope.showModal = false; 
    $scope.buttonClicked = ""; 
    $scope.toggleModal = function(btnClicked){ 
     $scope.buttonClicked = btnClicked; 
     $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">{{ buttonClicked }} clicked!!</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.$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; 
      }); 
     }); 
     } 
    }; 
    }); 

    </script> 
</body> 
</html>

UPDATE 2 限制： 'E'：指令將被用作一個HTML標記（元素）。在我們的情況下的例子是

<modal>

其他值「A」的屬性

<div modal>

「C」類（在我們的情況下不優選的，因爲模態已在bootstrap.css一個類）

<div class="modal">

來源

2014-12-11 06:58:43

它沒有運行，我添加了bootstrap.min.js＆bootstrap.min.css到上面的代碼，但它不工作。 – veera 2014-12-11 07:19:14

你是否遇到任何控制檯錯誤？你也需要jQuery – 2014-12-11 07:24:08

沒有錯誤，所有的按鈕顯示，當我點擊按鈕沒有彈出顯示。 – veera 2014-12-11 07:26:37

如果您使用bootstrap.js，那麼下面的代碼可能會有用。這很簡單。不必在js中寫任何東西來調用彈出窗口。

來源：http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Modal Example</h2> 
    <!-- Trigger the modal with a button --> 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

    <!-- Modal --> 
    <div class="modal fade" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
     </div> 

    </div> 
    </div> 

</div> 

</body> 
</html>

來源

2016-01-19 07:35:13 AceLearn

使用Angular JS的簡單彈出菜單

回答

相關問題