我有一个 UI,我在其中将angucomplete添加为动态 html。我有一个指令可以像这样在 add 上编译 html:
.directive('dynamic', function ($compile) {
return {
restrict: 'A',
replace: true,
link: function (scope, ele, attrs) {
scope.$watch(attrs.dynamic, function (html) {
console.log('dynamic watch');
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
})
现在我有一个添加按钮,它将 angucompletes 文本框附加到指令“动态”中的现有 html。当我添加 angucomplete 时,我之前选择的所有值也会被清除。我不明白为什么。我尝试调试 angucomplete-alt.js 但找不到原因。
我也在类似的场景中使用了ng-tagsinput并且效果很好,当我添加新行时,之前的 tags-input 不会丢失其选定的值。
function recommendationHtml(recommedCount) {
var men = 'men';
var women = 'women';
var tblRecommend = ' <table id="tblid'+recommedCount+'" style="padding:5px;border-bottom:solid 1px;"> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon fa-inr fa-2x"></i> '
+ ' </td> '
+ ' <td> '
+ '<div class="item range range-positive"> '
+ '<label id="spanprice_' + recommedCount + '" name="spanprice_' + recommedCount + '">1000</label> '
+ '<input id="slider_' + recommedCount + '" type="range" step="500" name="slider_' + recommedCount + '" min="1000" max="50000" value="1000" '
+ ' onchange="angular.element(document.querySelector(\'#spanprice_0\')).val(this.value);"/> '
+ ' </div> '
+ ' </td> '
+ ' </tr> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon ion-bag fa-2x"></i> '
+ ' </td> '
+ ' <td> '
+ ' <tags-input ng-model="vendors' + recommedCount + '" id="vendors' + recommedCount + '" '
+ ' display-property="name" '
+ ' key-property="id" '
+ ' on-tag-added="storeTagAdded($tag)" '
+ ' on-tag-removing="storeTagRemoved($tag)" '
+ ' max-tags="1" '
+ ' placeholder="store"> '
+ ' <auto-complete source="loadVendors($query)"></auto-complete> '
+ ' </tags-input> '
+ ' </td> '
+ ' </tr> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon ion-bag fa-2x"></i></td> '
+ ' <td> '
+ '<div angucomplete-alt id="vendor' + recommedCount + '" placeholder="Search Store" '
+ 'pause="300" selected-object="selectedVendorPost" local-data="vendorData"'
+ ' search-fields="name" title-field="name" description-field="email"'
+ ' image-field="image" minlength="1" remote-url-data-field="name"'
+ ' input-class="form-control form-control-small"'
+ ' match-class="highlight" style="border-bottom: 1px solid;"'
+ ' ng-keydown="removedVendorPost($event,' + recommedCount + ')" >'
+ '</div>'
+ ' </td> '
+ ' </tr> '
+ ' <tr> '
+ ' <td class="td-recommendation"><i class="icon ion-tshirt-outline fa-2x"></i></td> '
+ ' <td> '
+ '<div angucomplete-alt id="apparel_' + recommedCount + '" placeholder="Search apparel" '
+ 'pause="300" selected-object="selectedApparel" local-data="apparelData"'
+ ' search-fields="tagname" title-field="tagname" description-field=""'
+ ' image-field="" minlength="1" remote-url-data-field=""'
+ ' input-class="form-control form-control-small"'
+ ' match-class="highlight" style="border-bottom: 1px solid;"'
+ ' ng-keydown="removedApparel($event,' + recommedCount + ')" >'
//+ ' onkeydown="javascript:console.log(event:' + 'event.which' + 'value:' + ' this.value' + 'index:' + recommedCount + ');"'
+ '</div>'
+ ' </td> '
+ ' </tr> '
+ ' </table>';
return tblRecommend;
};
$scope.addRecommend = function() {
$scope.html = $scope.html + recommendationHtml($scope.recommedCount);
$scope.recommedCount = $scope.recommedCount + 1;
//$compile(recommendationHtml(0).contents())($scope);
};
.directive('dynamic', function($compile) {
return {
restrict: 'A',
replace: true,
link: function(scope, ele, attrs) {
scope.$watch(attrs.dynamic, function(html) {
console.log('dynamic watch');
ele.html(html);
$compile(ele.contents())(scope);
});
}
};
})
<div dynamic="html"></div>