1

は基本的に私は、このシナリオのように達成したい:動的データに動的HTMLを追加するにはどうすればよいですか?

https://i.stack.imgur.com/LLTcK.png

私の研究は、最後の指令で$コンパイルし、$ trustAsHtml、に私を導きました。 $ compileと$ trustAsHtmlでは静的なテンプレートまたはHTMLのみを追加できますが、ui-sref、ng-clickなどの動的なものは使用できません。 したがって、ディレクティブを作成しようとしましたが、クリックすると複数のテンプレートを追加できます。

コントローラ:

app.controller('Ctrl', ['$rootScope', '$scope',function ($rootScope, $scope) 
{  
    $rootScope.enableDirective=false;   
    if(userHasOneApp){// checking some at least one app then only do action 
    $rootScope.appicon="img_url"; // data which i am passing 
    $rootScope.appname="App_name"; // data which i am passing 
    $rootScope.enableDirective=true; 
} 
}]); 

カスタムディレクティブ:

app.directive('headerTemplate', function() { 
    return {    
     template:'<a ui-sref="/event" ng-click="editIt()">' 
       +'<img src="{{appicon}}"></a>' 
       +'<span>{{appname}}</span>', 
     scope:{         
      appname:'=', 
      appicon:'=' 
     }    
     }; 
    }); 

ヘッダビュー:

<div> class="headerdiv"> 
    <ul ng-if="enableDirective"> 
     <li header-template appicon="appicon"> 
     </li>      
    </ul> 
</div> 

メインビュー:

<div> class="maindiv"> 
    <ui-view></ui-view> <!--basically I want to append template here --> 
    <button>Add next template</button> 
</div> 

どこが間違っていますか?

+0

の遅延読み込みすなわち、必要なとき* *動作しないことにより、どういう指示を提供したかったところ、それは私のシナリオで働いていましたか? 'ui-sref'は' ui-sref = "event"のようにstatenameでなければならず、それが固定されていても同じ時間に 'ng-click'と' ui-sref'を実行することはできません。あなたが 'href'を介して他のページに移動すると、' click'イベントは起動されませんので、 –

+0

私は理解しているのは、実行中の角度アプリケーションに動的にディレクティブを追加したいのですか? –

+0

$ trustAsHtmlを使用した場合、ui-srefはリンクを生成するはずですが、ui-sref = "event"のようにリンクを生成していないため、href = "/ event"としてlinkeを生成する必要があります@PankajParkar – uday214125

答えて

関連する問題