如何開發一個按鈕點擊打開的彈出框（Angularjs）

任何人都可以引用鏈接或演示代碼來使用angularjs開發彈出窗口。如何開發一個按鈕點擊打開的彈出框（Angularjs）

我試過下面的代碼，但它不工作。

var myApp = angular.module('myApp', ['ngRoute', 'ngMap', 'ui.bootstrap']); 

myApp.config(function($routeProvider, $locationProvider) { 
    $locationProvider.hashPrefix(''); 
    $routeProvider 
     .when("/", { 
      templateUrl: "views/home.php", 
      controller: 'PopupDemoCont' 
     }) 
     .when("/profile.php", { 
      templateUrl: "views/profile.php" 

     }) 
     .otherwise({ 
      redirectTo: "/" 
     }); 
}); 

myApp.controller("ImageController", ["$scope", function($scope) { 

    $scope.logoimage = "images/logo.png"; 
    $scope.bgtextimage = "images/bgtextimage.png"; 

}]); 

myApp.controller("PopupDemoCont", ["$scope", "$modal", function($scope, $modal) { 
    $scope.open = function() { 
     console.log('opening pop up'); 
     var modalInstance = $modal.open({ 
      templateUrl: 'views/popup.php', 
      controller: 'PopupCont' 
     }); 
    }; 
}]); 

myApp.controller("PopupCont", ["$scope", "$modalInstance", function($scope, $modalInstance) { 
    $scope.close = function() { 
     $modalInstance.dismiss('cancel'); 
    }; 
}]);

在下面的html中，我設置ng控制器，但它不工作。

<div class="book_div"> 
    <div class="book_content"> 
     <p id="book-text">Facing Immigration 
      <br> Problems? 
     </p> 
     <p>Helpful Guid To Navigate Your Case</p> 
     <div class="hidden-sm hidden-xs"><img ng-src="{}" class="center-block img-responsive"> 
     </div> 
     <a class="submit-button book_btn" ng-click="open()">Free download</a> 
    </div> 
</div>

這是給錯誤：

[$injector:unpr].

來源

2017-07-28 Jazil Waqar

其實你是在正確的軌道上，確保你使用的是最新的角度ui bootstrap庫，並且它已經被包含在你的HTML裏面了..還有請在瀏覽器控制檯中顯示完整的錯誤信息 – Rahul

檢出https：// angular-ui .github.io/bootstrap /＃！＃模式鏈接。最新的ui bootstrap模式有$ uibModal – Rahul

您可以使用uibModalinstance。

按鈕點擊調用功能打開。開放功能

代碼：

$scope.open = function(uuid,name){ 
var instance = $uibModal.open({ 
         animation: $scope.animationsEnabled, 
         templateUrl: 'common/common/partials/delete- 
             confirm.tpl.html', 
         controller: function ($uibModalInstance, 
               $scope) { 
          $scope.name = Name; 
          $scope.icon = "fa-cogs"; 
          $scope.description = "Yo have opened uib 
           Popup" 
          $scope.delete = function() {         
          $uibModalInstance.close($scope.deleteValue); 
          }; 

          $scope.cancel = function() { 
           $uibModalInstance.dismiss('cancel'); 
          }; 
         } 
        }); 
}

我已經使用這個代碼刪除我的紀錄。你可以在你的方式使用，如果你想利用彈出的響應，你可以使用：

instance.result.then(function (option) { 
// Your code here    
        }, function() { 
         console.log('Modal dismissed at: ' + new Date()); 
        });

HTML模板將是這樣的：

<div class="modal-header gray_background"> 
      <h4><b>Permanently Delete - <i class="fa {{icon}} folderIcon" aria-hidden="true"></i> {{name}} </b></h4> 
     </div> 
     <div class="modal-body"> 
      <span data-ng-bind-html="description"></span> 

      <center style="margin-top: 10px;"> 
       <div>Type "delete" to confirm 
        <input type="text" class="input" ng-model="deleteValue" required /> 
       </div> 
      </center> 
     </div> 
     <div class="modal-footer gray_background"> 
      <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button> 
      <button class="btn btn-danger" type="button" ng-click="delete()">Delete</button> 
     </div>

希望這將是有益的，如果您有任何進一步的查詢你可以問。謝謝！

來源

2017-07-28 12:53:44

如何開發一個按鈕點擊打開的彈出框（Angularjs）

回答

相關問題