используйте html в контроллере angularjs - PullRequest
Новая
       4

используйте html в контроллере angularjs

0 голосов
/ 12 ноября 2018

У меня есть HTML, который я хочу использовать в контроллере контроллера angularjs. Моя проблема состоит в том, чтобы избежать HTML в контроллере angularjs. Вот мой фрагмент 

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

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Просто объедините $rootScope поля и добавьте его к любому элементу HTML 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>';

EDIT: 

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>
0 голосов
/ 12 ноября 2018

Сохранить как строку: 

 $scope.data='<html><div></div></html>'

Затем, когда вы хотите отрендерить, используйте ng-bind-html, например: 

 <div>
   <p ng-bind-html="data"></p>
 </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...