简单的弹出通过角JS [英] Simple Popup by using Angular JS

查看：144
本文介绍了简单的弹出通过角JS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是新来使用AngularJS。我有4个按钮命名的取消，拒绝，成功和放大器;去掉。如果我是上的任何按钮点击我要显示多个消息，即如果我点击取消则消息显示你点击取消按钮和放大器;等等。

我从下面链接，但简单的警告和放大器遵循;没有控制器被用于本实施例。

我希望有一个：一种模式弹出在ANGULARJS DIRECTIVE 的例子，所以我能理解。我曾尝试谷歌，但没有发现任何简单的例子。

请帮忙。谢谢

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=mymodal＆GT;
＆LT;身体GT;＆LT; D​​IV NG控制器=MainCtrl级=容器＆GT;
  ＆LT;按钮NG点击=toggleModal（'成功'）级=BTN BTN-默认＆GT;成功与LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（删除）级=BTN BTN-默认＆GT;删除＆LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（'拒绝'）级=BTN BTN-默认＆GT;拒绝＆LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（'取消'）级=BTN BTN-默认＆GT;取消＆LT; /按钮＆GT;
  ＆LT;模态可见=的ShowModal＆GT;
      任何额外的数据/按钮
  ＆LT; /莫代尔＆GT;
＆LT; / DIV＆GT;        ＆LT;！ - 脚本 - ＆GT;
    ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =htt​​p://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =htt​​p://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css＆GT;＆下; /脚本＆GT;
    ＆LT;！ - 应用程序 - ＆GT;
    ＆LT;脚本＆GT;
        VAR mymodal = angular.module（'mymodal'，[]）;mymodal.controller（'MainCtrl'，函数（$范围）{
    $ scope.showModal = FALSE;
    $ scope.buttonClicked =;
    $ scope.toggleModal =功能（btnClicked）{
        $ scope.buttonClicked = btnClicked;
        $ scope.showModal = $ scope.showModal！;
    };
  }）;mymodal.directive（'模式'，函数（）{
    返回{
      模板：'＆LT; D​​IV CLASS =模式变脸＆GT;' +
          '＆LT; D​​IV CLASS =模式-对话框＆GT;' +
            '＆LT; D​​IV CLASS =模式内容＆GT;' +
              '＆LT; D​​IV CLASS =模头＆GT;' +
                '＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;' +
                '＆LT; H4类=模式标题＆GT; {{buttonClicked}}点击!!＆LT; / H4＆GT;' +
              '＆LT; / DIV＆GT;' +
              '＆LT; D​​IV CLASS =模体NG-transclude＆GT;＆LT; / DIV＆GT;' +
            '＆LT; / DIV＆GT;' +
          '＆LT; / DIV＆GT;' +
        '＆LT; / DIV＆GT;，
      限制：'E'，
      transclude：真实，
      更换：真实，
      适用范围：真，
      链接：功能postLink（范围，元素，ATTRS）{
          范围。$腕表（attrs.visible，功能（价值）{
          如果（价值==真）
            $（元素）.modal（'秀'）;
          其他
            $（元素）.modal（隐藏）;
        }）;        $（元素）。在（'shown.bs.modal'，函数（）{
          范围。$应用（函数（）{
            。范围$父[attrs.visible] = TRUE;
          }）;
        }）;        $（元素）。在（'hidden.bs.modal'，函数（）{
          范围。$应用（函数（）{
            。范围$父[attrs.visible] = FALSE;
          }）;
        }）;
      }
    };
  }）;
    ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;链接：http://plnkr.co/edit/?p=$p$pview


解决方案

内置使用syarul的的jsfiddle链接模式弹出的例子。这里是更新小提琴。

创建了一个名为模态，并在HTML中使用的角度指令。
说明： -

HTML 

 ＆LT; D​​IV NG控制器=MainCtrl级=容器＆GT;
  ＆LT;按钮NG点击=toggleModal（'成功'）级=BTN BTN-默认＆GT;成功与LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（删除）级=BTN BTN-默认＆GT;删除＆LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（'拒绝'）级=BTN BTN-默认＆GT;拒绝＆LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（'取消'）级=BTN BTN-默认＆GT;取消＆LT; /按钮＆GT;
  ＆LT;模态可见=的ShowModal＆GT;
      任何额外的数据/按钮
  ＆LT; /莫代尔＆GT;
＆LT; / DIV＆GT;

在按钮点击toggleModal（）函数被调用的按钮消息作为参数。此功能切换弹出的可见性。你把里面的所有标签，在弹出的内容显示出来，因为NG-transclude被放置在模体中的指令模板。

JS 

  VAR mymodal = angular.module（'mymodal'，[]）;mymodal.controller（'MainCtrl'，函数（$范围）{
    $ scope.showModal = FALSE;
    $ scope.buttonClicked =;
    $ scope.toggleModal =功能（btnClicked）{
        $ scope.buttonClicked = btnClicked;
        $ scope.showModal = $ scope.showModal！;
    };
  }）;mymodal.directive（'模式'，函数（）{
    返回{
      模板：'＆LT; D​​IV CLASS =模式变脸＆GT;' +
          '＆LT; D​​IV CLASS =模式-对话框＆GT;' +
            '＆LT; D​​IV CLASS =模式内容＆GT;' +
              '＆LT; D​​IV CLASS =模头＆GT;' +
                '＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;' +
                '＆LT; H4类=模式标题＆GT; {{buttonClicked}}点击!!＆LT; / H4＆GT;' +
              '＆LT; / DIV＆GT;' +
              '＆LT; D​​IV CLASS =模体NG-transclude＆GT;＆LT; / DIV＆GT;' +
            '＆LT; / DIV＆GT;' +
          '＆LT; / DIV＆GT;' +
        '＆LT; / DIV＆GT;，
      限制：'E'，
      transclude：真实，
      更换：真实，
      适用范围：真，
      链接：功能postLink（范围，元素，ATTRS）{
        scope.title = attrs.title;        范围。$腕表（attrs.visible，功能（价值）{
          如果（价值==真）
            $（元素）.modal（'秀'）;
          其他
            $（元素）.modal（隐藏）;
        }）;        $（元素）。在（'shown.bs.modal'，函数（）{
          范围。$应用（函数（）{
            。范围$父[attrs.visible] = TRUE;
          }）;
        }）;        $（元素）。在（'hidden.bs.modal'，函数（）{
          范围。$应用（函数（）{
            。范围$父[attrs.visible] = FALSE;
          }）;
        }）;
      }
    };
  }）;

更新 

 ＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML NG-应用=mymodal＆GT;
＆LT;身体GT;＆LT; D​​IV NG控制器=MainCtrl级=容器＆GT;
  ＆LT;按钮NG点击=toggleModal（'成功'）级=BTN BTN-默认＆GT;成功与LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（删除）级=BTN BTN-默认＆GT;删除＆LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（'拒绝'）级=BTN BTN-默认＆GT;拒绝＆LT; /按钮＆GT;
  ＆LT;按钮NG点击=toggleModal（'取消'）级=BTN BTN-默认＆GT;取消＆LT; /按钮＆GT;
  ＆LT;模态可见=的ShowModal＆GT;
      任何额外的数据/按钮
  ＆LT; /莫代尔＆GT;
＆LT; / DIV＆GT;
＆LT;链接rel =stylesheet属性HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css＆GT;
        ＆LT;！ - 脚本 - ＆GT;
    ＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =htt​​p://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js＆GT;＆下; /脚本＆GT;＆所述; SCRIPT SRC =htt​​p://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js＆GT;＆下; /脚本＆GT;    ＆LT;！ - 应用程序 - ＆GT;
    ＆LT;脚本＆GT;
        VAR mymodal = angular.module（'mymodal'，[]）;mymodal.controller（'MainCtrl'，函数（$范围）{
    $ scope.showModal = FALSE;
    $ scope.buttonClicked =;
    $ scope.toggleModal =功能（btnClicked）{
        $ scope.buttonClicked = btnClicked;
        $ scope.showModal = $ scope.showModal！;
    };
  }）;mymodal.directive（'模式'，函数（）{
    返回{
      模板：'＆LT; D​​IV CLASS =模式变脸＆GT;' +
          '＆LT; D​​IV CLASS =模式-对话框＆GT;' +
            '＆LT; D​​IV CLASS =模式内容＆GT;' +
              '＆LT; D​​IV CLASS =模头＆GT;' +
                '＆LT;按钮式=按钮级=关闭数据解雇=莫代尔ARIA隐藏=真＆GT;＆安培;倍;＆LT; /按钮＆GT;' +
                '＆LT; H4类=模式标题＆GT; {{buttonClicked}}点击!!＆LT; / H4＆GT;' +
              '＆LT; / DIV＆GT;' +
              '＆LT; D​​IV CLASS =模体NG-transclude＆GT;＆LT; / DIV＆GT;' +
            '＆LT; / DIV＆GT;' +
          '＆LT; / DIV＆GT;' +
        '＆LT; / DIV＆GT;，
      限制：'E'，
      transclude：真实，
      更换：真实，
      适用范围：真，
      链接：功能postLink（范围，元素，ATTRS）{
          范围。$腕表（attrs.visible，功能（价值）{
          如果（价值==真）
            $（元素）.modal（'秀'）;
          其他
            $（元素）.modal（隐藏）;
        }）;        $（元素）。在（'shown.bs.modal'，函数（）{
          范围。$应用（函数（）{
            。范围$父[attrs.visible] = TRUE;
          }）;
        }）;        $（元素）。在（'hidden.bs.modal'，函数（）{
          范围。$应用（函数（）{
            。范围$父[attrs.visible] = FALSE;
          }）;
        }）;
      }
    };
  }）;    ＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

更新2
限制：E：指示要用作一个HTML标记（元素）。在我们的例子例子是

 ＆LT;＆模式GT;

其他的值是'A'的属性。

 ＆LT; D​​IV＆模式GT;

类'C'（而不是$ P $在我们的例子中pferable因为模式已经在bootstrap.css类）

 ＆LT; D​​IV CLASS =模式＆GT;

I am new to using AngularJS. I have 4 buttons named Cancel, Deny, Success & Remove. If am I click on any button I want to show multiple message i.e. If I click on Cancel then message showing you click on Cancel button & so on.

I have follow from below link but simple alert & no controller is used in this example.

I want a A MODAL POPUP IN AN ANGULARJS DIRECTIVE example so I can understand. I have try to google it but no simple examples found.

Please help. Thanks

<!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

解决方案

Built a modal popup example using syarul's jsFiddle link. Here is the updated fiddle.

Created an angular directive called modal and used in html. Explanation:-

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>

On button click toggleModal() function is called with the button message as parameter. This function toggles the visibility of popup. Any tags that you put inside will show up in the popup as content since ng-transclude is placed on modal-body in the directive template.

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 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 restrict : 'E' : directive to be used as an HTML tag (element). Example in our case is 

<modal>

Other values are 'A' for attribute 

<div modal>

'C' for class (not preferable in our case because modal is already a class in bootstrap.css)

<div class="modal">

这篇关于简单的弹出通过角JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆