问题

Changing the value from the dropdown trying to open the modal and supposed to perform http request and body of will be filled with the response. But unable to open the modal. Any help will be really appreciated.

    <head>
        <title>Hello AngularJS</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
    <link href="bootstrap.min.css" rel="stylesheet">
    </head>

    <body>
     <div ng-controller='NodeProvision'>   

<select ng-model="nodes" ng-change="nodeprovision(nodes)">
<option value="">please select</option>  
  <option value="1">One</option>
  <option value="2">Two</option>
</select>

 <script type="text/ng-template" id="myModalContent.html">
                                <div class="modal-header">
                                <h3 class="modal-title">Welcome to modal!!</h3>
                                </div>
                                <div class="modal-body">
                                <ul>
                                //<div ng-if="test">
                            <p>The response is {{items}} <span ng-bind="{{items}}"></span><i ng-hide="items"  class="icon icon-refresh icon-spin">loading.........</i></p>     
                            //</div>
                                </ul>                                
                               </div>
                               <div class="modal-footer">
                               <button class="btn btn-primary" ng-click="ok()">OK</button>
                                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                                </div>
                                </script>
        <!-- <div ng-if="test">
            <p>The response is {{response}} <span ng-bind="{{response}}"></span><i ng-hide="response"  class="icon icon-refresh icon-spin">loading.........</i></p>     
        </div> -->
        </div>
    </body>

<script>
        //Initializing the app
        var app = angular.module('myApp',['ui.bootstrap']);

        //Defining the controller to perform the business logic
         app.controller('NodeProvision', ['$scope','$http','$modal', function($scope,$http,$modal) {  

            $scope.nodeprovision = function(node){

    $scope.animationsEnabled = true;

      $scope.open = function (size) {
        var modalInstance = $modal.open({
          animation: $scope.animationsEnabled,
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            items: function () {
              $http.get('http://ac-00075763.devapollogrp.edu:8080/NodeProvision/provision/urn:apol:provider:acp/list?guid=5d4dc79e-f623-40f8-a14f-646c59c7b89a').
         success(function(data, status, headers, config) {
         $scope.items = data

         }).
         error(function(data, status, headers, config) {
           // log error
         });
            }
             }
            });  
             }; 
               }

         }]);



  app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;

  $scope.ok = function () {
    $modalInstance.close();
  };

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


    </script>
</html>

回答1:

Plunker Demo

Here is a fairly straightforward version of what you're trying to do. I have used a service (which would normally get the records using an $http request) in the resolve to keep things nice and clean.

Importantly, you should note the use of the return in the resolve objects. Without these, there is nothing to signal to the resolve that everything is done and it can allow the modal.open to do it's thing! Here's a great tutorial on using resolve with routes. The resolve property in the $modal service works identically to the one in ngRoute.

app.controller('ModalDemoCtrl', function ($scope, $modal, Data) {

  $scope.animationsEnabled = true;

  $scope.open=function(){
    var modalInstance=$modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      resolve: {
        loaddata: function(Data) {
                    return Data.get('allrecords');
                },
        selected: function () {
                    return $scope.model.id;
        }
      }
    });
  };

});

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance, selected, loaddata) {

  $scope.allrecords = loaddata.records;
  $scope.selected = selected;

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

来源：https://stackoverflow.com/questions/30641918/not-able-to-open-modal-box-selecting-value-from-the-dropdown-using-ui-bootstrap

标签

angularjs