AJS настроить HTML, чтобы показать только определенные части в нг-включения - PullRequest
0 голосов
/ 26 февраля 2019

Я могу включить html-файл в мое угловое приложение (ng-include), но я не хочу, чтобы весь контент в html отображался в моем приложении (это не угловое приложение и его содержимое не можетбыть изменен, поэтому ng-show и ng-hide не работали)

Ниже приведен пример кода

<div ng-app="myApp" ng-controller="customersCtrl"> 
  <div ng-include="'myTable.htm'"></div>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {

});
</script>

myTable.htm

<html>
  <head>this is head</head>
  <body>
<div> test
<h1 id="needToDispalythis">ds,<span>something</span></h1>
</div></body>
</html>

здесь я хочу толькоконент с идентификатором needToDispalythis должен отображаться.Я пытался с директивой, но не смог достичь этого.Любая помощь или указатели

1 Ответ

0 голосов
/ 26 февраля 2019

Обновление

Вы можете просто использовать jQuery, чтобы скрыть другие элементы, кроме элемента с идентификатором needToDisplayThis , например:

$(document).ready(function(){
  var elemToShow = $('#needToDisplayThis');
  $('body').html('<div><h1>'+elemToShow.html()+'</h1></div>');
});

Во-первых, ваш ng-include myTable.html не должен содержать тегов <html><head></head><body></body></html>.Используйте только разметку, которую вы хотите визуализировать, например: <div> test<h1 id="needToDispalythis">ds,<span>something</span></h1></div>.

Таким образом, ваш основной HTML должен выглядеть следующим образом:

<html>
  <head>this is head</head>
  <body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
      <div ng-include="'myTable.htm'"></div>
    </div>

    <script>
      var app = angular.module('myApp', []);
      app.controller('customersCtrl', function($scope, $http) {

      });
    </script>
  </body>
</html>

И ваш включенный HTML должен выглядеть следующим образом:

<div> 
  <span>test</span>
  <h1 id="needToDispalythis">ds,<span>something</span></h1>
</div>

Теперь, чтобы показать только элемент <h1>, вам нужно скрыть элемент <span>, поэтому добавьте к нему атрибут ng-hide:

<span ng-hide="hideThis">test<span/>

Теперь просто установитеhideThis для $scope в true:

<script>
   var app = angular.module('myApp', []);
   app.controller('customersCtrl', function($scope, $http) {
     $scope.hideThis = true;
   });
</script>

Итак, наконец, ваш основной html выглядит так:

<html>
  <head>this is head</head>
  <body>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
      <div ng-include="'myTable.htm'"></div>
    </div>

    <script>
      var app = angular.module('myApp', []);
      app.controller('customersCtrl', function($scope, $http) {
        $scope.hideThis = true;
      });
    </script>
  </body>
</html>

и ваш myTable.html выглядит так:

<div> 
  <span ng-hide="hideThis">test<span/>
  <h1>ds,<span>something</span></h1>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...