I am trying to achieve a scenario similar to this:
https://i.sstatic.net/LLTcK.png
After researching, I found out about $compile, $trustAsHtml, and finally directives. However, in $compile and $trustAsHtml, I can only append static templates or plain HTML without using dynamic elements like ui-sref or ng-click. So, I attempted to create a custom directive but it's not working, and I'm struggling to add multiple templates on click.
Here is the controller code snippet:
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;
}
}]);
And here's the custom directive:
app.directive('headerTemplate', function () {
return {
template:'<a ui-sref="/event" ng-click="editIt()">'
+'<img src="{{appicon}}"></a>'
+'<span>{{appname}}</span>',
scope:{
appname:'=',
appicon:'='
}
};
});
The Header view section looks like this:
<div class="headerdiv">
<ul ng-if="enableDirective">
<li header-template appicon="appicon">
</li>
</ul>
</div>
Lastly, in the Main view:
<div class="maindiv">
<ui-view></ui-view> <!--basically I want to append template here -->
<button>Add next template</button>
</div>
Can someone help me figure out where I'm going wrong?