Question

我正在使用带有jquery 1.9.1和bootstrap 3.x的angularjs来开发单页Web应用程序。我从我的控制器生成我的html文件，如：

    var fieldData='<div class="box1 input-group date">';
    fieldData=fieldData+'<label for="dob" class="col-md-4 col-xs-12 col-sm-12">Date Of Birth (mm/dd/yy)</label>';
    fieldData=fieldData+'<div class="input-group date col-md-8">';
    fieldData=fieldData+'<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphiconglyphicon-th"></i></span>';
    fieldData=fieldData+'</div></div>';

document.getElementById("calcDiv").innerHTML =fieldData;

我的index.html包含：

<!DOCTYPE html>
<html ng-app="calcApp">

    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <!-- lib/angularjs  -->
        <script type="text/javascript" src="lib/angular/angular.js"></script>
        <script type="text/javascript" src="lib/angular/angular-route.js"></script>
        <script type="text/javascript" src="lib/angular/angular-resource.js"></script>
        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/datepicker.min.css" rel="stylesheet">
        <link href="css/simple-slider.css" rel="stylesheet" type="text/css" />
        <link href="css/simple-slider-volume.css" rel="stylesheet" type="text/css" />  
    </head>

<body >

<div ng-include='"view/header.html"'></div>

    <div class="container" ng-controller="calcController">

<div class="des-ail clearfix" id="calcDiv"> 

</div>

    </div>

<!--------------- javascript ---------->
<script src="lib/common/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="lib/common/bootstrap.js" ></script>

<script type="text/javascript"  src="js/apps/application.js"></script>
<script  type="text/javascript" src="js/controllers/calcController.js"></script>

<script type="text/javascript" src="lib/common/html5shiv.min.js"></script>
<script type="text/javascript" src="lib/common/respond.min.js"></script>
<script type="text/javascript" src="lib/common/bootstrap-datepicker.js"></script>


</body>

</html>

成功生成输出但日期选择器不起作用。

类似地，由角js控制器生成的其他html控件不会被jquery操纵，如jquery-slider和其他jquery-methods。

注意：如果我只是在index.html中编写那个html代码，比如

<div class="box1 input-group date">
                <label for="dob" class="col-md-4 col-xs-12 col-sm-12">Date Of Birth (mm/dd/yy)</label>
                <div class="input-group date col-md-8">

                    <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
                </div>
            </div>

然后它被jquery操纵。

Answer 1

如果你要创建动态html，那么$（＆＃34; .datepicker＆＃34;）。datepicker（）;应该在插入每个元素时调用，而不是在加载时调用。

由角js控制器生成的HTML不由jquery处理

1 个答案: