使用syarul的jsFiddle链接构建了一个模式d出示例。这是更新的小提琴。
创建了一个称为modal的角度指令，并在html中使用。说明：-
的HTML
<div ng-controller="MainCtrl" > <button ng-click="toggleModal('Success')" >Success</button> <button ng-click="toggleModal('Remove')" >Remove</button> <button ng-click="toggleModal('Deny')" >Deny</button> <button ng-click="toggleModal('Cancel')" >Cancel</button> <modal visible="showModal"> Any additional data / buttons </modal></div>在单击按钮时，以按钮消息为参数调用toggleModal（）函数。此功能切换d出窗口的可见性。由于ng-transclude放置在指令模板中的modal-
body上，因此您放入其中的所有标签都将作为内容显示在d出窗口中。
JS
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 >' +'<div >' + '<div >' + '<div >' + '<button type="button" data-dismiss="modal" aria-hidden="true">×</button>' + '<h4 >{{ buttonClicked }} clicked!!</h4>' + '</div>' + '<div 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; }); }); } }; });更新
<!doctype html><html ng-app="mymodal"><body><div ng-controller="MainCtrl" > <button ng-click="toggleModal('Success')" >Success</button> <button ng-click="toggleModal('Remove')" >Remove</button> <button ng-click="toggleModal('Deny')" >Deny</button> <button ng-click="toggleModal('Cancel')" >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 >' +'<div >' + '<div >' + '<div >' + '<button type="button" data-dismiss="modal" aria-hidden="true">×</button>' + '<h4 >{{ buttonClicked }} clicked!!</h4>' + '</div>' + '<div 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 limit：’E’：伪指令用作HTML标记（元素）。我们的例子是
<modal>
其他值为“ A”的属性
<div modal>
类的“ C”（在我们的情况下不建议使用，因为modal已经是bootstrap.css中的类）
<div >
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）