Angulaire: ng-bind-html filtre ng-click?

J'ai quelques données html que je suis le chargement à partir d'un fichier json.

Je suis l'affichage de ce code html de données en utilisant ngSanitize dans mon application et l'utilisation de ng-bind-html.

Maintenant, je voudrais convertir tous les liens dans le json blob de la norme

  • <a href="some_link">link</a>

à:

  • <a ng-click="GotoLink('some_link','_system')">link</a>.

Donc je fais une regExp sur le fichier json pour convertir les liens, mais pour certaines raisons, cependant ng-bind-le html est le filtrage de la ng-cliquez sur dans elle est sortie, et je ne peux pas comprendre pourquoi. Est-il censé faire cela, et si oui, est-il possible de désactiver ce comportement?

Découvrez ce jsFiddle pour une démonstration:
http://jsfiddle.net/7k8xJ/1/

Des idées?

InformationsquelleAutor Squrler | 2014-03-29
  1. 42

    Ok, donc le problème est qu'il n'est pas de compiler le code html de l'inclure (angulaire n'est pas l'analyser pour trouver les directives et autres joyeusetés). Ne peux pas penser à une façon de faire pour compiler à partir de l'intérieur de la manette, mais vous pouvez créer une directive qui inclut le contenu, et le compile.

    De sorte que vous changeriez

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

    à

    <p compile="name"></p>

    Et puis pour le js:

    var myApp = angular.module('myApp', ['ngSanitize']);
angular.module('myApp')
.directive('compile', ['$compile', function ($compile) {
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        return scope.$eval(attrs.compile);
      },
      function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      }
   )};
  }]).controller('MyCtrl', function($scope) {
    var str = 'hello http://www.cnn.com';
    var urlRegEx = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[\-;:&=\+$,\w]+@)?[A-Za-z0-9\.\-]+|(?:www\.|[\-;:&=\+$,\w]+@)[A-Za-z0-9\.\-]+)((?:\/[\+~%\/\.\w\-]*)?\??(?:[\-\+=&;%@\.\w]*)#?(?:[\.\!\/\\\w]*))?)/g;
    result = str.replace(urlRegEx, "<a ng-click=\"GotoLink('$1',\'_system\')\">$1</a>");
    $scope.GotoLink = function() { alert(); }
    $scope.name = result;
});

    Angulaire 1.2.12: http://jsfiddle.net/7k8xJ/4/

    Angulaire 1.4.3: http://jsfiddle.net/5g6z58yy/ (même code que précédemment, mais certains disaient que ça ne fonctionne pas sur 1.4.*)

    • Cela fonctionne très bien, merci! Juste une pensée (et je ne suis pas vraiment clair si je suis compréhension $sce correctement, la documentation est un peu floue) mais il n'est pas possible de la liste blanche de parcourir de manière qu'elle soit délivrée par ng-bind-html?
    • Ce n'est pas de travail pour moi dans angulaire 1.4.3 jeter des erreurs": [$rootScope:infdig] 10 $digest() itérations atteint. L'abandon!"
    • vu cette solution dans d'autres de répondre au mieux.. mais ne fonctionne pas pour moi à 1,4.*
    • Semble fonctionner très bien sur 1.4.3: jsfiddle.net/5g6z58yy
    • Si u confirmer, je dois essayer de nouveau..
    • si cela ne fonctionne pas pour vous, vérifiez que la méthode que vous voulez l'appeler, est en effet à votre portée, selon les règles de portée de la directive, il peut être sur les parents

    InformationsquelleAutor dave
  2. 2

    Explicitement Confiance HTML Avec $sce
    Lorsque vous voulez Angulaire de rendre le modèle de données au format HTML sans poser de questions, le $sce service, c'est ce dont vous aurez besoin. $sce est la Stricte Contextuelle s'Échapper de service – un nom de fantaisie pour un service qui peut s'enrouler une chaîne HTML avec un objet qui raconte le reste de l'Angulaire de l'HTML est approuvé pour rendre n'importe où.

    Dans la version suivante du contrôleur, le code demande pour le $sce service et utilise le service pour transformer la matrice de liens dans un tableau de confiance des objets HTML à l'aide de $sce.trustAsHtml.

    app.controller('XYZController', function ($scope, $sce) {

$sce.trustAsHtml("<table><tr><td><a onclick='DeleteTaskType();' href='#workplan'>Delete</a></td></tr></table>");
    • Fixation onclick gestionnaire n'est pas équivalente à la connexion ng-gestionnaire de clic sur un élément. Cela ne fonctionne pas, lorsque vous allez utiliser ng-click au lieu de onclick dans votre extrait de code.
    InformationsquelleAutor user5740953
  3. 1

    J'ai encore rencontré de problème avec la compilation, qui ne répondait pas à mes besoins. Donc, il y a ceci, un vraiment agréable et facile hack pour contourner ce problème.

    Nous remplacer le ng-click avec onClick comme onClick œuvres. Ensuite, nous allons écrire une fonction javascript et l'appeler sur l'événement onClick.
    Dans le onClick de la fonction, nous trouvons la portée de la balise d'ancrage et appeler cette fonction requise explicitement.

    Ci-dessous comment c'est fait 🙂

    Plus tôt,

    <a id="myAnchor" ng-click="myControllerFunction()" href="something">

    Maintenant,

    <a id="myAnchor" onClick="tempFunction()" href="something">

    en bas ou ailleurs,

    <script>
function tempFunction() {
 var scope = angular.element(document.getElementById('myAnchor')).scope();
  scope.$apply(function() {
    scope.myControllerFunction();
 });
}
</script>

    Cela devrait fonctionner maintenant. Espérons que l'aide à quelqu'un 🙂

    Pour plus d'info, voir ici.

    • non, ce n'est certainement pas la façon de le faire, non testables, est une mauvaise solution
    • calmer bro, je pourrais le faire de cette façon, comment pouvez-vous ne pas le tester, n'ai-je pas mentionné ci-dessus comme solution de contournement? calmer bro, et, si possible, veuillez retirer votre rage de downvote?
    • upvoted vous car vous avez mentionné que c'était une solution de contournement
    • Merci
    • walkarounds sont généralement désagréables.
    InformationsquelleAutor Satys