從下拉列表中更改試圖打開模式的值，並假定執行http請求和正文將充滿迴應。但無法打開模式。任何幫助將非常感激。無法使用ui-bootstrap-tpls.min.js和angular.min.js打開下拉菜單中的模式框選擇值

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

2015-06-04 gourab das

Plunker Demo

這裏是你試圖做一個非常簡單的版本。我已經使用了一個服務（通常會使用$ http請求獲取記錄）來保持事物的美觀和乾淨。

重要的是，你應該注意在解析對象中使用return。沒有這些，沒有任何信號表明一切都已經完成，並且可以讓modal.open做到這一點！關於使用路由使用解析，這裏有一個很好的tutorial。 $ modal服務中的resolve屬性與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'); 
    }; 
});

來源

2015-06-04 19:24:09 jme11

非常感謝你@Jme11 ...你真的是個好人......你不僅給出了答案，你描述流程的方式......真的很感激......我會期待在未來幾天內獲得更多的建議......歡呼！ –

你很受歡迎。只是供參考，如果有關於SO的答案對您有幫助，那麼習慣於註冊，如果它爲您的問題提供了答案，您可以選擇該答案作爲答案來解決問題。 – jme11

無法使用ui-bootstrap-tpls.min.js和angular.min.js打開下拉菜單中的模式框選擇值

回答

Plunker Demo

相關問題