Question

我正在学习AngularJS，我在谷歌搜索但是找不到解决问题的方法。

我正在使用jQueryUI进行对话，使用CSS的bootstrap，我希望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" );
        });
    });
});

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

提供可显示的发送不会在控制台上显示任何内容

有什么想法吗？

Answer 1

要初始化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"]);
        });
    });

使用AngularJS的Jquery UI对话框

1 个答案: