J'essaie d'appeler une méthode en utilisant angular qui est placée à l'intérieur de .append.
Mais la méthode n'est pas appelée. Puis-je utiliser ng-click à l'intérieur de .append? Sinon y en a-t-il un autre façon d'ajouter l'élément en angulaire?

var app=angular
.module('myApp',[])
.controller('myController',function($scope){

  $scope.clickMe = function(){
        $('.paragraph').append('<span ng-click="closeMe()"><i class="fa fa-times" aria-hidden="true"></i></span>');
  }      
  $scope.closeMe = function(){
    alert("closed")
  }
})

Exemple: https://jsfiddle.net/fjhbbnno/

0
krish 15 nov. 2017 à 09:03

4 réponses

Meilleure réponse

Vous devrez d'abord faire une compilation dynamique pour lier les directives angulaires telles que ng-click à la portée de votre contrôleur, quelque chose comme

var el = '<span ng-click="closeMe()"><i class="fa fa-times" aria-hidden="true"></i></span>';
var compiledElement = $compile(el)($scope); 

Maintenant, vous pouvez ajouter ceci comme

$('.paragraph').append(compiledElement )

N'oubliez pas d'injecter le service $compile dans votre contrôleur

4
George Bailey 15 nov. 2017 à 06:11

C'est vrai, mais ce n'est pas la meilleure pratique. Souvent, cela ne fonctionnera pas car l'élément n'est pas dans la plage de portée jusqu'à ce qu'il soit créé, ce qui est trop tard.

Angular a un ensemble de règles très particulières qui ont été faites pour que les choses restent «claires», disons. Un autre exemple est l'injection de dépendances, ce qui signifie que vous ne pouvez pas fournir plusieurs dépendances entre différents modules avec le même nom, ce n'est pas très intelligent non plus, car si vous avez un module principal, que d'autres contrôleurs dérivent juste de lui, déclarez toutes vos dépendances dans le module principal et gardez votre code clair.

Solution:

1) Créez votre bouton de fermeture et gardez-le caché, affichez-le après avoir ajouté votre code HTML.

2) Une autre solution consiste à créer une fenêtre contextuelle contenant les informations pertinentes.

3) Si vous devez ajouter le ng-click, utilisez la dépendance $ compile qui amènera vos directives à la portée à partir du code HTML ajouté:

 var compile = $compile(appendedElement)($scope) 
1
Barr J 15 nov. 2017 à 06:16

Vous pouvez également utiliser le ng-bind-html

$scope.clickMe = function(){
      $scope.htmlCode= $sce.trustAsHtml('<span ng-click="closeMe()"><i class="fa fa-times" aria-hidden="true"></i></span>'); 
}  

<p>
  This is a sample.
  <span ng-bind-html="htmlCode">
  </span>
</p>

Injectez également le $sce au contrôleur. Démo

1
Sachila Ranawaka 15 nov. 2017 à 06:16

Vérifiez si cette logique aide

jsfiddle

var app=angular.module('myApp',[])
        .controller('myController',function($scope){
            $scope.clicked = false;
          $scope.clickMe = function(){
                $scope.clicked = true;
          }      
          $scope.closeMe = function(){
            alert("closed")
          }
        })

HTML:

<section ng-app="myApp" ng-controller="myController" ng-init="init()">
<div class="paragraph">
<p>
This is a sample.
</p>
<span ng-if="clicked"><i class="fa fa-times" aria-hidden="true" ng-click="closeMe()"></i></span>
</div>
<button ng-click="clickMe()">Add Close ICon</button>
</section>
1
sSaroj 15 nov. 2017 à 06:15
47300427