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

Question

“对不起我的英语不是我的母语”

解决问题。我在动态创建表单字段时遇到了 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.

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 找到有关如何从“外部”使用 Angular 的简短说明。