javascript - 在 angularjs Controller 中使用 html

标签 javascript html angularjs

我有 html theat 我想在 angularjs Controller 中使用。我的问题是转义 angularjs Controller 中的 html。这是我的片段

function($scope) {
     $scope.data=  <table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>$rootScope.firstname</td>
                <td>$rootScope.lastname</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>$rootScope.firstname1</td>
                <td>$rootScope.lastname1</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>$rootScope.firstname2</td>
                <td>$rootScope.lastname2</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>;

如何将表格 html 和根范围数据传递到 scope.data 变量

最佳答案

只需连接 $rootScope 字段,然后将其附加到任何 html div 元素

  function($scope) {
     $scope.data= '<table class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>'+$rootScope.firstname+'</td>
                <td>'+$rootScope.lastname+'</td>
                <td>@mdo</td>
              </tr>
              <tr>
                <td>2</td>
                <td>'+$rootScope.firstname1+'</td>
                <td>'+$rootScope.lastname1+'</td>
                <td>@fat</td>
              </tr>
              <tr>
                <td>3</td>
                <td>'+$rootScope.firstname2+'</td>
                <td>'+$rootScope.lastname2+'</td>
                <td>@twitter</td>
              </tr>
            </tbody>
          </table>';

编辑:

var app=angular.module("testProject",[]);

app.controller("TestController", function($scope, $rootScope) {
  
$rootScope.firstname="firstname";
$rootScope.lastname="lastname";
$rootScope.firstname1="firstname1";
$rootScope.lastname1="lastname1";
$rootScope.firstname2="firstname2";
$rootScope.lastname2="lastname2";

     $scope.data= '<table class="table"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr></thead> <tbody> <tr> <td>1</td><td>'+$rootScope.firstname+'</td><td>'+$rootScope.lastname+'</td><td>@mdo</td></tr><tr> <td>2</td><td>'+$rootScope.firstname1+'</td><td>'+$rootScope.lastname1+'</td><td>@fat</td></tr><tr> <td>3</td><td>'+$rootScope.firstname2+'</td><td>'+$rootScope.lastname2+'</td><td>@twitter</td></tr></tbody> </table>';
     $("#data_table").append($scope.data);
          
          
          });
<html  ng-app="testProject">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<div  ng-controller="TestController" id="data_table"></div>


</html>

关于javascript - 在 angularjs Controller 中使用 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53258791/

相关文章:

javascript - 滚动上的动画 SVG

javascript .hover 函数问题

javascript - 我是否设置为正确使用 Angular Js 的 cookie

javascript - 在我的网站上将最新的推文作为纯文本添加?

javascript - 为什么 div 不显示/隐藏 jQuery 中的选择选项

html - 元素的 z-index 但是不同的定位?

javascript - 道场 Dgrid : select deselect of header checkbox

javascript - 如何增加 ionic 列表的宽度?

angularjs - 在 AngularJS 指令中加载页面后启用按钮

javascript - 从设置为原型(prototype)的对象调用属性