ng-bind-html ne marche pas pour les balises Input

Je suis en train de stocker un code HTML à l'intérieur d'une étendue variable et ensuite l'utiliser dans le modèle de vue. Quand j'ai lu comment faire cela dans angulaire, je suis tombé sur ng-bind-html. Dans que j'ai remarqué que lorsque je la lie des balises html avec <a>, <strong>, etc.. il fonctionne. Mais je suis incapable d'ajouter <input> tags.

Sens, cela fonctionne:

$scope.myHtml = '<strong>This is <a hreaf="#">Something</a></strong>';

Modèle:

<p ng-bind-html="myHtml"> </p>

Mais cela ne marche pas:

$scope.myHtml = '<input type="text" />';

Modèle:

<p ng-bind-html="myHtml"> </p>

Ci-dessus est juste une simplification de l'échantillon à des fins de démonstration uniquement. Ma question est:

1) les balises Ne fonctionnent pas avec ng-bind-directive html?

2) Si non, comment puis-je html lier une balise d'entrée afin que je puisse l'insérer à l'intérieur de la vue?

Il n'a probablement pas, le html est désinfecté avant, il est inséré, et j'imagine que l'entrée est considéré comme dangereux. Pourquoi avez-vous besoin pour ce faire. Il semble en désordre et je suis sûr qu'il ya une meilleure façon à l'aide de modèles ou de directives.
Je suis en train d'essayer d'utiliser ce à l'intérieur d'un complexe directive qui construit les balises html pour les entrées basées sur la sélection d'attributs, puis de les utiliser à l'intérieur d'un modèle qu'il est arriver via $http get.
Êtes-vous à l'aide de la compile fonction de cette directive?
ouais.. il compile à la fin.
Ok. Si non, je pense toujours que vous pouvez faire cela sans avoir à utiliser ng-bind-html ou similaire en déclarant que la compilation de la fonction dans le cadre de la directive la directive définition de l'objet et de la mutation du modèle.

OriginalL'auteur Neel | 2014-04-02

  1. 30

    vous obtenez $sce:dangereux erreur...

    cela signifie que vous devriez utiliser ng-bind-html-unsafe mais version plus récente d'angularjs ne comprend pas cette directive est plus tellement il est recommandé d'utiliser $sce.trustAsHtml() comme ça...

    $scope.trustedInputHtml = $sce.trustAsHtml('<input type="text" />');

    mais de cette façon, vous ne pouvez pas lier la portée des variables dans votre code html, donc le meilleur moyen est la rédaction d'une directive qui peut être remplacer par ng-bind-html-unsafe...

    voici de travail PLUNKER pour les deux $sce et de la directive exemples...

    DE L'AIMER! Je vais tester votre travail de l'échantillon. Merci pour cette superbe exemple. Je serai de retour avec une mise à jour une fois que je l'ai testé dans mon application.
    voir ma mise à jour ainsi si vous ne souhaitez pas créer un personnalisé directive pour que les...
    Merci tas pour vos réponses. À l'aide de $sce.trustAsHtml() avant ng-bind-html a fait un travail. Cependant, à la fin, je suis allé à la directive approche de cette après la prise de votre suggestion ainsi que la prise de EdHinchliffe et Whisher recommandation de la ce. Et la meilleure partie est que je n'avez même pas besoin d'utiliser le désinfecter module pour obtenir que cela fonctionne. Je vous remercie beaucoup. Il m'a fallu plusieurs heures aujourd'hui à la recherche sur ce! Je suis heureux qu'il y est un propre méthode pour y parvenir. Votre Plunker exemple ci-dessus a beaucoup aidé. Bien obligé! 🙂
    vous êtes les bienvenus homme 😀
    La directive @wickY26 parlé est juste le compile directive, ici : docs.angularjs.org/api/ng/service/$compiler renommé ^^

    OriginalL'auteur

  2. 2

    Je voudrais garder les choses que vous insérez dans son propre modèle et l'utiliser ng-inclure (http://docs.angularjs.org/api/ng/directive/ngInclude).

    Avoir un angulaires du modèle (template.html) avec le contenu:

    <strong>This is <a href="#">Something</a></strong>

    Vous pouvez l'inclure avec

    <p ng-include="template.html"></p>

    Cette résultats dans qqch comme 

    <p ng-include="template.html"><span class="ng-scope"><strong>This is <a href="#">Something</a></strong></span></p>

    OriginalL'auteur

  3. 1

    Angulaire de manière sélective assainit certaines balises HTML avec ng-bind-html

    donc, si vous voulez que toutes les balises que vous devez utiliser ng-bind-html-dangereux au lieu

    mais méfiez-vous des attaques XSS !

    BTW

    Il est beaucoup mieux de suivre le @Ed Hinchliffe morceau de conseils

    Je pense que le ng-bind-html-unsafe ne fonctionne pas dans la version la plus récente plus.
    Je l'ai vérifié avec la version 1.2.16 et il fonctionne

    OriginalL'auteur