使用AngularJS的Jquery对话框
使用AngularJS的Jquery对话框
提问于 2015-06-02 15:26:39
我正在学习AngularJS，我在谷歌搜索，但甚至找不到解决我的问题的办法。
我将jQueryUI用于对话框，引导用于CSS，并希望AngularJS用于事件和数据库查询。
我有以下文件：
index.html
<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<title></title>
</head>
<body>
<link rel="stylesheet" href="js/jquery-ui-1.11.4/jquery-ui.min.css"></link>
<link rel="stylesheet" href="bootstrap-3.3.4/css/bootstrap.min.css">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<script src="bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/angular-1.3.15/angular.js"></script>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" aria-expanded="false" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Menu</a>
</div>
<div id="navbar" class="navbar-collapse collapse active">
<ul class="nav navbar-nav">
<li id="mJobs"><a href="#"><span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>JOBS</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<div id="d_window"></div>
</body>
</html>文件demo.js
$(function(){
$( "#d_window" ).dialog({
autoOpen: false,
position: { my: "center", at: "center" }
});
$("#mJobs").click(function(){
$.ajax({
url: 'views/jobs.html',
type: 'POST',
dataType: 'html',
data: 'content',
}).done(function (data) {
$( "#d_window" ).html('');
$( "#d_window" ).append(data);
$( "#d_window" ).dialog( "open" );
});
});
});文件jobs.html
<script src="js/bolsaAPP.js"></script>
<div ng-app="bolsaAPP">
<table class="table" ng-controller="bolsaView">
<tr>
<td colspan="2" align="center">
<button id="btnEnviarBolsa" ng-click="SendJobs()" class="btn btn-info btn-xs"> Send</button>
</td>
</tr>
</table>
</div>文件bolsaAPP.js
var bolsaAPP = angular.module('bolsaAPP', [ ]);
bolsaAPP.controller('bolsaView', function($scope){
console.log('enter');
$scope.SendJobs = function(){
console.log('hello');
};
});若要提供可显示的发送，则控制台上不显示任何内容。
有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-06-02 15:44:50
要初始化AngularJS应用程序，通常需要将ng-app属性放在定义应用程序作用域的HTML元素上。一旦DOM内容完成加载，Angular将负责安装过程本身，并引导应用程序。但是，在html异步呈现的情况下，角不会等待。
幸运的是，AngularJS应用程序也可以通过编程方式引导。
因此，一旦您将html附加到d_window元素，您应该手动引导角应用程序。尝尝这个
$("#mJobs").click(function(){
$.ajax({
url: 'views/jobs.html',
type: 'POST',
dataType: 'html',
data: 'content',
}).done(function (data) {
$( "#d_window" ).html('');
$( "#d_window" ).append(data);
$( "#d_window" ).dialog( "open" );
angular.bootstrap(document, ["bolsaAPP"]);
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30600294
复制相关文章
相似问题
腾讯云开发者
