AngularJSクリックがディレクティブ動的テンプレート関数内で機能しない

Question

インラインエディタ用のAngularjsディレクトリを作成しました。 HTMLテンプレートは、HTMLルート要素で関数とコンパイルを使用して作成されます。私の問題は、トグルを達成するために要素をクリックしたときにステータス変数を変更したいのですが、動作していないようです。

参考用にコードスニペットが含まれています。これは、ディレクティブリンク関数内に記述されています。

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

     }(); 

コードを確認してください。私は本当にこのように実装したい。前もって感謝します！

Answer 1

var MediaNameEditableをスコープに添付する必要があります。この

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

     }(); 

またはあなたはそれが..Thanksの作品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); 

     }();