ngTagsInput mit Autovervollständigung in einem Formular und hinzufügen zu db

Question

Ich habe versucht, ngTagsInput mit seiner Autocomplete-Funktion (mbenford.github.io/ngTagsInput/demos) in einem HTML-Formular zu verwenden, um Rezepte in Mongodb einzureichen.

Im Grunde benutze ich ngTagsInput mit Autocomplete, um meine Zutaten db und Zutaten-Tags in den "Zutaten im Rezept" abzufragen.

Es funktioniert gut, bis ich das Rezept speichern, und die Zutaten werden nicht gespeichert.

Ich weiß, wo das Problem ist, aber ich habe noch keine Lösung gefunden. Hier ist das Feld ‚Zutaten‘ meiner Add Rezept Seite ohne ngTagsInput, nur ein normales Textfeld:

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

Und hier ist das Feld ‚Zutaten‘ mit ngTagsInput (Arbeits in Ordnung, aber nicht speichern):

Da ich ng-model = "form.ingredients" durch ng-model = "tags" ersetze, die für die Verwendung von ngTagsInput erforderlich sind, werden diese Inhaltsstoff-Tags nicht gespeichert, wenn ich auf die Schaltfläche "Rezept hinzufügen" klicke.

Hier wird die „save db“ Teil meines recipeApiController, auf der Formularseite „Rezept hinzufügen“ verwendet:

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

Haben Sie eine Ahnung, wie ich das in Ordnung bringen könnte, und diese Tags speichern?

Vielen Dank im Voraus Jungs. Ich wollte nicht, dass dieser Beitrag zu lang ist, aber wenn Sie mehr Informationen brauchen, Code, werde ich super reagieren, um es zu liefern. Das würde mir sehr helfen.

Answer 1

fand ich eine Lösung in einem anderen Beitrag: https://stackoverflow.com/a/38383917/6858949

Grundsätzlich könnte ich nicht, dass diese Tags erhalten zu sparen, weil ng-Modell innerhalb der <tags-input> Tags nicht funktionierte. Ich habe daher durch diese Richtlinie Kerl die <tags-input> auf ein Attribut zu ändern:

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

Hier ist die Richtlinie Code:

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); 
    }; 
} 
} 
}); 

Ich glaube nicht, das optimal ist, aber mit meinem aktuellen Wissenstand Code, ich bin dankbar, dass ich diese Lösung gefunden habe. ✌

EDIT: Ich benutze jetzt ui-select: https://github.com/angular-ui/ui-select Und es auf jeden Fall empfehlen

EDIT: ich den Code in der Code-Box setzen