angularjs - Dynamically adding Angular ui-select to page

Question

I am attempting to add dom element to the page after returning from an ajax request. The dom element contains ui-select directives, and I am getting this error:

Error: error:orphan
Orphan ngTransclude Directive

I am adding the content to the page like this:

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

where -contents- contains the ui-select directives below:

<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>

Any ideas on how better to accomplish this?

Answer 1

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