Question

Basically I want to achieve like this scenario:

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

My research led me to $compile, $trustAsHtml,at last directive. In $compile and $trustAsHtml I can only append static template or only html but can't use dynamic things such ui-sref, ng-click etc. So, I tried to create directive it is not working and also I am unable to add multiple template on click.

controller :

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

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:'='
        }             
      };
    });

Header view :

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

Main view :

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

Where I am doing wrong ?

Answer 1

我正面临同样的问题请查看以下链接这肯定会对你有帮助。

我已经实现了这个，它在我的场景中工作，我想在需要时提供指令，即延迟加载指令

https://www.codeproject.com/Articles/838402/Lazy-loading-directives-in-AngularJS-the-easy-way

How to append dynamic html with dynamic data in angular1?

1 个答案: