单击按钮时AngularJS打开模态

Question

单击按钮时AngularJS打开模态

我试图学习在AngularJS中单击按钮时打开模式对话框但无法这样做.我检查了chrome控制台,但没有错误.此外,由于我正在学习AngularJS,请在Chrome控制台没有显示任何错误时建议您做什么.

这是我的代码

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Har*_*gun 10

希望这会帮助你 .

这是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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

检查一下 - jsfiddle

当我点击"测试模态"时,没有任何反应.在控制台日志中出现非模态且没有错误.这会发生在其他人身上吗？ (3认同)
检查这个样本,希望能帮到你:) http://plnkr.co/edit/kQz0fiaXLv7T37N8fzJU?p=preview (2认同)

Answer 2

Ste*_*n_R 2

你应该看看Batarang来进行 AngularJS 调试

\n\n

至于你的问题：

\n\n

您的范围变量未正确直接附加到模式。下面是调整后的代码。您需要指定模式何时显示使用ng-show

\n\n

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

Run Code Online (Sandbox Code Playgroud)\n

归档时间：	10 年，6 月前
查看次数：	99458 次
最近记录：	8 年，3 月前