ngTagsВнимание с автозаполнением в форме и добавление в db

Question

Я пытаюсь использовать ngTagsInput с его функцией автозаполнения (mbenford.github.io/ngTagsInput/demos) в форме html для отправки рецептов в Mongodb.

В основном, я использую ngTagsInput с Autocomplete, чтобы запросить мои ингредиенты db и отобразить теги ингредиентов в разделе «Ингредиенты в рецепте».

Он отлично работает, до тех пор, пока я не сохраню рецепт, и ингредиенты не будут сохранены.

Я знаю, где проблема, но я пока не нашел решение. Вот поле «ингредиенты» моего добавления страницы рецепта без ngTagsInput, просто обычный текст поля:

<div class="form-group"> 
      <label for="ingredients">List of ingredients</label> 
      <input type="text" class="form-control" id="ingredients" ng-model="form.ingredients"> 
     </div> 

А вот поле «ингредиенты», используя ngTagsInput (работает нормально, но не экономить):

Потому что я заменяю ng-model = "form.ingredients" с ng-model = "тегами", необходимыми для использования ngTagsInput, те теги ингредиентов не сохраняются при нажатии кнопки «Добавить рецепт».

Здесь «сохранить в БД» часть моего recipeApiController, используемого на «добавить рецепт» страницу формы:

$scope.addToDatabase = function(){ 
    RecipeApi.Recipe.save({}, $scope.form, 
    function(data){ 
     $scope.recipe.push(data); 
    }, 
    function(err){ 
     bootbox.alert('Error: ' + err); 
    }); 
} 

У вас есть какие-либо идеи, как я мог бы исправить это, и сохранить эти теги?

Спасибо заранее, ребята. Я не хотел, чтобы этот пост был слишком длинным, но если вам нужна дополнительная информация, код, я буду очень реактивен, чтобы обеспечить его. Это очень помогло бы мне.

Answer 1

Я нашел решение в другом посте: https://stackoverflow.com/a/38383917/6858949

В принципе, я не мог получить эти теги, чтобы сохранить, потому что нг-модель не работает внутри <tags-input> тегов. Поэтому я использовал директиву этого парня, чтобы изменить <tags-input> к атрибуту:

<div elem-as-attr="tags-input"></div> 

Вот код директивы:

app.directive('elemAsAttr', function($compile) { 
return { 
restrict: 'A', 
require: '?ngModel', 
replace: true, 
scope: true, 
compile: function(tElement, tAttrs) { 
    return function($scope) { 
    var attrs = tElement[0].attributes; 

    var attrsText = ''; 
    for (var i=0; i < attrs.length; i++) { 
     var attr = attrs.item(i); 
     if (attr.nodeName === "elem-as-attr") { 
     continue; 
     } 
     attrsText += " " + attr.nodeName + "='" + attr.nodeValue + "'";   
    } 

    var hasModel = $(tElement)[0].hasAttribute("ng-model"); 
    var innerHtml = $(tElement)[0].innerHTML; 
    var html = '<' + tAttrs.elemAsAttr + attrsText + '>' + innerHtml + '</' + tAttrs.elemAsAttr + '>'; 

    var e = hasModel ? $compile(html)($scope) : html; 
    $(tElement).replaceWith(e); 
    }; 
} 
} 
}); 

Я не думаю, что это является оптимальным, но с моим текущим знанием код, я благодарен, что нашел это решение. ✌

EDIT: Я теперь с помощью пользовательского интерфейса, выберите: https://github.com/angular-ui/ui-select И определенно рекомендую

EDIT: Я поставил код в поле кода