0

我有一个 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>

4

0 回答 0