无法使用UI的引导，tpls.min.js和angular.min.js从下拉菜单中打开模式对话框选择价值 [英] Not able to open modal box selecting value from the dropdown using ui-bootstrap-tpls.min.js and angular.min.js
本文介绍了无法使用UI的引导，tpls.min.js和angular.min.js从下拉菜单中打开模式对话框选择价值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
从下拉列表中试图打开模态和应该履行的将与响应充满HTTP请求和身体的改变值。但无法打开模式。任何帮助将是非常美联社preciated。
＆LT; HEAD＆GT;
＆LT;标题＆GT;您好AngularJS＆LT; /标题＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js\"></script>
＆LT;链接HREF =bootstrap.min.css的rel =stylesheet属性＆GT;
＆LT; /头＆GT; ＆LT;身体GT;
＆LT; DIV NG控制器='NodeProvision'＆GT;＆LT;选择NG模型=节点NG-变化=nodeprovision（节点）＆GT;
＆LT;期权价值=＆gt;请选择＆LT; /选项＆GT;
＆LT;期权价值=1＆GT;的One＆LT; /选项＆GT;
＆LT;期权价值=2＆GT;二＆LT; /选项＆GT;
＆LT; /选择＆GT; ＆LT;脚本类型=文/ NG-模板ID =myModalContent.html＆GT;
＆LT; DIV CLASS =模头＆GT;
＆LT; H3类=模式标题＆GT;欢迎模式!!＆LT; / H3 GT＆;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模体＆GT;
＆LT; UL＆GT;
//＆LT; DIV NG-IF =测试＆GT;
＆LT; P＆gt;该反应是{{项目}}＆LT;跨度NG绑定={{项目}}＆GT;＆LT; / SPAN＆GT;＆LT;我NG-隐藏=项级=图标图标刷新图标自旋＆的载量.........＆下; / I GT;＆下; / p＆GT;
//＆LT; / DIV＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT; DIV CLASS =模式躯＆GT;
＆LT;按钮类=BTN BTN-主要NG点击=OK（）＆GT;确定＆LT; /按钮＆GT;
＆LT;按钮类=BTN BTN-警告NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
＆LT; / SCRIPT＆GT;
＆LT;！ - ＆LT; DIV NG-IF =测试＆GT;
＆所述; P＆gt;将响应是{{响应}}＆下;跨度纳克绑定={{响应}}＆GT;＆下; /跨度＆GT;＆下;我纳克隐藏=响应类=图标图标刷新图标自旋＆的载量.........＆下; / I GT;＆下; / p＆GT;
＆LT; / DIV＆GT; - ＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT;脚本＆GT;
//初始化应用程序
VAR应用= angular.module（'对myApp'，['ui.bootstrap']）; //定义控制器执行业务逻辑
app.controller（'NodeProvision'，['$范围，$ HTTP，$模式'，函数（$范围，$ HTTP，$模态）{ $ scope.nodeprovision =功能（节点）{ $ scope.animationsEnabled =真; $ scope.open =功能（大小）{
VAR modalInstance = $ modal.open（{
动画：$ scope.animationsEnabled，
templateUrl：myModalContent.html'，
控制器：'ModalInstanceCtrl'，
大小：大小，
解析：{
项目：功能（）{
$http.get('http://ac-00075763.devapollogrp.edu:8080/NodeProvision/provision/urn:apol:provider:acp/list?guid=5d4dc79e-f623-40f8-a14f-646c59c7b89a').
成功（功能（数据，状态，头，配置）{
$ scope.items =数据 }）。
错误（功能（数据，状态，头，配置）{
//记录错误
}）;
}
}
}）;
};
} }]）; app.controller（'ModalInstanceCtrl'，函数（$范围，$ modalInstance，物品）{ $ scope.items =物品; $ scope.ok =功能（）{
$ modalInstance.close（）;
}; $ scope.cancel =功能（）{
$ modalInstance.dismiss（'取消'）;
};
}）;
＆LT; / SCRIPT＆GT;
＆LT; / HTML＆GT;
解决方案
Plunker演示
下面是你试图做一个非常简单的版本。我已经使用了一个服务于一体的决心让事情变得漂亮和干净（这将使用$ http请求通常会得到的记录）。
重要的是，你应该注意，使用的决心对象的回报。如果没有这些，有什么好信号给解决一切都做，它可以让modal.open做的事情这是一个伟大的教您如何使用解决与路线。在$模式服务的resolve属性相同工作的之一ngRoute。
app.controller（'ModalDemoCtrl'，函数（$范围，$模式，数据）{ $ scope.animationsEnabled =真; $ scope.open =功能（）{
VAR modalInstance = $ modal.open（{
动画：真实，
templateUrl：myModalContent.html'，
控制器：'ModalInstanceCtrl'，
解析：{
loaddata：功能（数据）{
返回Data.get（'allrecords'）;
}，
选择：功能（）{
返回$ scope.model.id;
}
}
}）;
};}）;app.controller（'ModalInstanceCtrl'，函数（$范围，$ modalInstance，选择loaddata）{ $ scope.allrecords = loaddata.records;
$ scope.selected =选择; $ scope.cancel =功能（）{
$ modalInstance.dismiss（'取消'）;
};
}）;
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>
解决方案
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');
};
});
这篇关于无法使用UI的引导，tpls.min.js和angular.min.js从下拉菜单中打开模式对话框选择价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
