使用AngularJS在Bootstrap中打開模式窗口

我在解決此問題時遇到問題。請原諒我的錯誤，我是AngularJS的新成員。這是我在主app.js代碼：使用AngularJS在Bootstrap中打開模式窗口

angular.module('myApp', ['duScroll', 'emailModal']);

然後，我有這樣的代碼在我emailModal.module.js文件：

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

mymodal.controller('ModalCtrl', function ($scope) { 
    $scope.showModal = false; 
    $scope.toggleModal = 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; 
       }); 
      }); 
     } 
    }; 
});

在我的索引文件，口主體的標記之後我有一個控制器的div：

<body> 
<div ng-controller="ModalCtrl" class="container"> 
    <modal title="Login form" visible="showModal"> 
    <form role="form"> 
     <div class="form-group"> 
     <label for="email">Email address</label> 
     <input type="email" class="form-control" id="email" placeholder="Enter email" /> 
     </div> 
     <div class="form-group"> 
     <label for="password">Password</label> 
     <input type="password" class="form-control" id="password" placeholder="Password" /> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    </modal> 
<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
    </div> 
    <div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li><a href="#Anchor1" du-smooth-scroll du-scrollspy>Anchor 1</a></li> 
     <li><a href="#Anchor2" du-smooth-scroll du-scrollspy>Anchor 2</a></li> 
     <li><a href="#Anchor3" du-smooth-scroll du-scrollspy>Anchor 3</a></li> 
     </ul> 
    <div class="navbar-brand img-responsive"> 
     <img src="assets/img/logo_menu_blank.png" /> 
    </div> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="" ng-click="toggleModal()">Open Modal</a> </li> 
     </ul> 
    </div><!--/.navbar-collapse --> 
    </div> 
</nav> 
</div>

我試過所有可能的組合，並且無法使這項工作。

來源

2016-01-17 TenderloinSky

看看UI引導：

https://angular-ui.github.io/bootstrap/#/modal

這是它可以讓你在輕鬆和清潔的方式使用引導有角的圖書館。

UPDATE

當你正在學習角，我決定去看看你的代碼更接近並運行它。事實上，它正在工作。我改變的唯一不是將'duScroll'模塊添加到應用程序。

你一定已經忘記了一些細節......你有沒有將ng-app="myApp"添加到html根元素？您是否檢查瀏覽器控制檯是否給您提供任何錯誤？

來源

2016-01-17 18:44:36 PJDev

ng-app被添加到html中，而duScroll正在處理我的錨定導航，因爲它是單頁應用程序。我的另一個問題是，模態在任何時候都可見，就在我的導航下。根本不應該隱藏。 – TenderloinSky

使用AngularJS在Bootstrap中打開模式窗口

回答

相關問題