动态添加 Angular ui-select 到页面

Question

我试图在从 ajax 请求返回后向页面添加 dom 元素。 dom 元素包含 ui-select 指令，我收到此错误：

Error: error:orphan
Orphan ngTransclude Directive

我将内容添加到页面是这样的：

var childDiv = $compile('<div>_contents_</div>')($scope);
parentDiv.append(childDiv);

其中 -contents- 包含以下 ui-select 指令：

<p>Selected: {{address.selected.formatted_address}}</p>   
<ui-select ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             >
      <ui-select-match placeholder="Enter an address...">
          {{$select.selected.formatted_address}}
      </ui-select-match>
      <ui-select-choices repeat="address in addresses track by $index"
                         refresh="refreshAddresses($select.search)"
                         refresh-delay="0">
          <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
      </ui-select-choices>   
</ui-select>

关于如何更好地完成此任务有什么想法吗？

Answer 1

我不确定页面设置如何。但是您可能可以将所选项目添加到 $scope 数组中，然后 ng-repeat 覆盖该数组。这样，当您收到 ajax 响应时，您只需 .push 将项目放入该数组，然后 ng-repeat 将负责将其添加到 DOM 并创建一个子范围。

动态添加 Angular ui-select 到页面

Dynamically adding Angular ui-select to page

angularjs

ui-select2

angularjs-ng-transclude