ボタンをクリックして開くポップアップを作成するにはどうすればいいですか（Angularjs）

Question

anglejsを使用してポップアップを作成するためのコードやデモの参照は、誰でも参照できます。

次のコードを試しましたが、動作しません。

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

nlowコントローラでは、ng-controllerを設定しましたが、動作していません。あなたはuibModalinstanceを使用することができます

[$injector:unpr].

Answer 1

：

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

それはエラーを与えています。

ボタンをクリックすると、関数openが呼び出されます。オープン関数の

コード：

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

・ホープあなたが求めることができる質問。 ありがとう！