登录
当前位置： 首页 > 面试题库 >

使用Angular JS的简单弹出窗口

羿昊英
2023-03-14
问题内容：

我是使用AngularJS的新手。我有4个名为“取消”，“拒绝”，“成功”和“删除”的按钮。如果我单击任何按钮，我想显示多条消息，即，如果我单击“取消”，则显示您单击“取消”按钮的消息，依此类推。

我从下面的链接进行跟踪，但是在此示例中未使用简单的警报且未使用任何控制器。

我想要一个 在ANGULARJS指令 示例中的 模态弹出框， 这样我才能理解。我尝试用谷歌搜索它，但是没有找到简单的例子。

请帮忙。谢谢

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

问题答案：

使用syarul的jsFiddle链接构建了一个模式弹出示例。这是更新的小提琴。

创建了一个称为modal的角度指令，并在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放置在指令模板中的modal-
body上，因此您放入其中的所有标签都将作为内容显示在弹出窗口中。

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;
          });
        });
      }
    };
  });

更新

<!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 limit：’E’：伪指令用作HTML标记（元素）。我们的例子是

<modal>

其他值为“ A”的属性

<div modal>

类的“ C”（在我们的情况下不建议使用，因为modal已经是bootstrap.css中的类）

<div class="modal">


 类似资料：
  • 如何使用jQuery生成简单的弹出窗口

    问题内容： 我正在设计一个网页。当我们单击名为mail的div的内容时，如何显示一个包含标签电子邮件和文本框的弹出窗口？ 问题答案： 首先是CSS-调整它，但是您喜欢： 和JavaScript： 最后是html： 这是一个jsfiddle演示和实现。 根据情况，您可能需要通过ajax调用来加载弹出内容。最好避免这种情况，因为这可能会给用户带来更大的延迟，使他们无法观看内容。如果采用这种方法，您将在

  • 无法使用HOC制作简单的弹出窗口

    我真的是一个新的反应，我真的不明白我可能做错了什么。 我有这个JSX文件 我想在另一个文件中使用它，如下所示： 我遵循CSS方法来创建本文中的弹出窗口：https://codepen.io/bastianalbers/pen/PWBYvz 按照回答中的建议做：反应。js：将一个组件包装到另一个组件中 试图理解以下文章：https://medium.com/@dan_abramov/milins-a

  • AngularJS Fancybox弹出窗口

    问题内容： 我已经开始了angularjs项目，我想实现fancybox。 为此，我在解决方案中包含了jQuery和fancybox插件。我试图在下面的fancybox窗口中显示的代码中打开模板。 视图 控制者 还有 popup / add.html Fancybox成功打开了一个包含模板的窗口，但是该表达式尚未求值。谁能帮忙吗？ 问题答案： 我已经为fancybox创建了指令

  • 作为弹出窗口和下拉菜单的简单Java GUI

  • JavaScript实现简单的弹窗效果

    本文向大家介绍JavaScript实现简单的弹窗效果，包括了JavaScript实现简单的弹窗效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现弹窗效果的具体代码，供大家参考，具体内容如下 使用css动画效果实现弹窗缓慢弹出和收回。 使用JavaScript实现定时弹出定时收回。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。

  • 如果在弹出窗口外单击，请关闭弹出窗口

    我有这段代码显示了一个按钮谁显示一个弹出窗口，我希望用户能够关闭弹出窗口点击它的外部时，它是打开的。

相关阅读

AngularJS ng-click在弹出窗口内损坏使用selenium处理弹出窗口简单实现jQuery弹窗效果使用Selenium Python ChromeDriver从弹出窗口/表单下载PDFRselenium-弹出窗口

相关文章

Bootstrap 弹出框Bootstrap4 弹出框2.4.5 ListView简单实用Hello World 一个简单的Java程序来介绍RabbitMQ的使用简单大方的简历自我介绍

相关问答

在弹出窗口javafx中使用模态使用带有Selenium的Phantomjs接受弹出窗口创建弹出窗口selenium webdrivers中的弹出窗口在JavaFX中使用ProgressBar显示弹出窗口

相关工具

简单炸弹人小游戏源码AlertView弹出动画简单UITableViewDemo简单CMS简单的广告栏

相关文档

Markdown 简单的世界上云如此简单简单粗暴 TensorFlow 2Ember.js 简单入门教程AngularJS 入门教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.