添加NG-自動完成輸入標籤時，通過Javascript

Question

動態創建的輸入標籤「對不起，我的英語，因爲它是不是我的母語」

上的問題。當我動態創建表單域時，我遇到了ng-autocomplete問題。當我創建的指數文件輸入標籤，但是當我嘗試通過javascript函數添加更多標籤創建..

的NG-自動完成不會在新的輸入標籤工作

的NG-自動完成工作正常

正如您在圖片中看到的兩個輸入域「從旅遊」和「移動到」已NG-自動完成，但它是由JavaScript函數創建沒有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。

Answer 1

您需要使用$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); 

... 

良好的簡短說明，可以發現here。