如何在angular1中附加动态html和动态数据？答案

【问题标题】：How to append dynamic html with dynamic data in angular1?如何在angular1中附加动态html和动态数据？
【发布时间】：2023-03-12 20:30:01
【问题描述】：

基本上我想实现这样的场景：

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

我的研究使我找到了 $compile, $trustAsHtml,at last 指令。在 $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>

我在哪里做错了？

【问题讨论】：

不工作是什么意思？虽然ui-sref 应该是像ui-sref="event" 这样的州名，即使已修复，您也不能同时触发ng-click 和ui-sref。因为一旦您通过href 导航到其他页面，click 事件将不会被触发
所以我的理解是你想动态添加一个指令到你已经运行的角度应用程序？
当我使用 $trustAsHtml 时，ui-sref 应该生成链接，但它没有生成链接，因为 ui-sref="event" 应该生成链接作为 href="/event" @PankajParkar
@AnkitRaonka 是的，我想使用指令来实现这一点，因为在指令的情况下，我得到的是链接而不是附加功能。
@user7390851 你的问题解决了吗？

标签： javascript angularjs angularjs-directive angular-ui-router

【解决方案1】：

嗯，我也面临同样的问题查看以下链接这一定会对你有所帮助。

我已经实现了这一点，它适用于我想在需要时提供指令的场景，即延迟加载指令

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

【讨论】：