javascript之通过 Javascript 动态创建输入标签时，将 ng-autocomplete 添加到输入标签

“抱歉我的英语，因为它不是我的母语”

说到问题。当我动态创建表单字段时，我遇到了 ng-autocomplete 问题。

当我在 index 文件中创建输入标记时，ng-autocomplete 工作正常，但是当我尝试通过 javascript 函数添加更多标记时，ng-autocomplete 在新的输入标记中不起作用创建..

如图所示，两个输入字段“Travel from”和“Travel to”具有 ng-autocomplete，但由 javascript 函数创建的输入字段“travel via”没有 ng-autocomplete..

问题是如何通过该函数为每个创建的输入字段添加一个有效的 ng-autocomplete ？

下面是 script.js 文件，其中包含用于创建输入标记的代码

$(document).ready(function(){ 
  var i=1; 
 $("#add_city").click(function(){ 
 
  $('#end_city'+i).html('<input type="text" class="form-control input-lg ng-isolate-scope" name="via_city" ng-autocomplete="via_city" placeholder="Travel via" autocomplete="off" />'); 
 
  $('#tab_logic').append('<div id="end_city'+(i+1)+'"></div>'); 
  i++;  
}); 
 
 $("#delete_city").click(function(){ 
 
     if(i>1){ 
     $("#end_city"+(i-1)).html(''); 
     i--; 
     } 
 }); 
 
}); 

还有index.php

    <div class="page-header"> 
    <h4>Create your trip</h4> 
</div> 
 
 
<form ng-submit="submitTrip()"> <!-- ng-submit will disable the default form action and use our function --> 
 
    <!-- START CITY --> 
    <div class="form-group col-md-6"> 
        <input type="text" class="form-control input-lg" name="start_city" ng-autocomplete="tripData.start_city" placeholder="Travel from"> 
    </div> 
 
            <!-- END CITY -->                 
            <div class="form-group col-md-6" id="tab_logic"> 
                <div id="end_city0"> 
                    <input type="text" class="form-control input-lg" name="end_city" ng-autocomplete="tripData.end_city" placeholder="Travel to"> 
 
                </div> 
                <div id="end_city1"></div> 
            </div> 
 
 
 
    <!-- START DATE --> 
    <div class="form-group col-md-6"> 
        <input type="date" class="form-control input-lg" name="start_date" ng-model="tripData.start_date" placeholder="Travel date"> 
    </div> 
 
    <!-- END DATE --> 
    <div class="form-group col-md-6"> 
        <input type="date" class="form-control input-lg" name="end_date" ng-model="tripData.end_date" placeholder="Return date"> 
    </div> 
 
    <!-- COMMENT --> 
    <div class="form-group col-md-12"> 
        <textarea class="form-control input-lg" name="comment" ng-model="tripData.comment"></textarea> 
    </div> 
 
    <!-- Img --> 
    <div class="form-group col-md-12"> 
        <input type="text" class="form-control input-lg" name="img" ng-model="tripData.img" placeholder="Image source"> 
    </div> 
 
    <!-- SUBMIT BUTTON --> 
    <div class="form-group text-right">  
        <button type="submit" class="btn btn-primary btn-lg">Submit</button> 
    <a id="add_city" class="btn btn-default pull-left">Add City</a><a id='delete_city' class="pull-right btn btn-default">Delete City</a> 
            </div> 
</form> 

我看过这两个例子，我不知道为什么它不起作用。如果有人知道如何解决这个问题，那将会有很大帮助:)

http://plnkr.co/edit/il2J8qOI2Dr7Ik1KHRm8?p=preview

http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion

谢谢!

/K.A.

请您参考如下方法:

您需要使用 $compile 来编译该元素服务:

... 
 
$('#tab_logic').append('<div id="end_city' + (i + 1) + '"></div>'); 
 
var element = angular.element(document.querySelector('#end_city' + i)); 
var scope = element.scope(); 
var $compile = element.injector().get('$compile'); 
$compile(element)(scope); 
 
... 

可以找到关于如何从“外部”使用 Angular 的简短说明 here .