AngularJS ng-click funktioniert nicht innerhalb der Direktive für dynamische Vorlagen

Question

Ich habe ein Angularjs-Verzeichnis für einen Inline-Editor erstellt. Die HTML-Vorlage wird mithilfe von Funktionen erstellt und mit dem HTML-Wurzelelement kompiliert. Mein Problem ist, dass ich eine Statusvariable ändern möchte, wenn ich auf ein Element klicke, um das Umschalten zu erreichen, aber es scheint nicht zu funktionieren.

Ich habe die Code-Schnipsel als Referenz enthalten, die in eine Direktive Link-Funktion geschrieben wird.

var appendTotemplate = function() { 
      var uploadMediaName = "hello"; 
      var MediaNameEditable = false; 

      template = "<a ng-if='MediaNameEditable !=true' ng-click='MediaNameEditable=true'" + uploadMediaName + "</a>" + 
          "<input ng-if='MediaNameEditable==true' type='text' value='" + uploadMediaName + "' id='mediatxt' ng-click='MediaNameEditable=false;' >"; 
      var linkFn = $compile(template); 
      var content = linkFn(scope); 
      element.append(content); 

     }(); 

Bitte überprüfen Sie den Code. Ich möchte das wirklich umsetzen. Danke im Voraus!

Answer 1

Die Variable MediaNameEditable sollte dem Bereich hinzugefügt werden. Versuchen Sie, diese

var appendTotemplate = function() { 
      var uploadMediaName = "hello"; 
      scope.MediaNameEditable = false; 

      template = "<a ng-if='MediaNameEditable !=true' ng-click='MediaNameEditable=true'" + uploadMediaName + "</a>" + 
          "<input ng-if='MediaNameEditable==true' type='text' value='" + uploadMediaName + "' id='mediatxt' ng-click='MediaNameEditable=false;' >"; 
      var linkFn = $compile(template); 
      var content = linkFn(scope); 
      element.append(content); 

     }(); 

oder können Sie eine Funktion machen die MediaNameEditable

var appendTotemplate = function() { 
      var uploadMediaName = "hello"; 
      scope.MediaNameEditable = false; 

      scope.toggleMediaName = function(isEditable) 
      { 
       scope.MediaNameEditable = isEditable; 
      } 

      template = "<a ng-if='MediaNameEditable !=true' ng-click='toggleMediaName(true)'" + uploadMediaName + "</a>" + 
          "<input ng-if='MediaNameEditable==true' type='text' value='" + uploadMediaName + "' id='mediatxt' ng-click='toggleMediaName(false)' >"; 
      var linkFn = $compile(template); 
      var content = linkFn(scope); 
      element.append(content); 

     }();