AngularJS получает разобранный HTML

Question

В приведенном ниже коде у меня есть шаблон и на основе флага IsEdit будет отображено соответствующее представление. Отсюда, есть ли способ получить угловой разбор HTML, который виден только представлению.

, например

Если IsEdit = false, то я хочу отобразить HTML как

<div>
   View Mode
</div>

или даже

<div ng-show="!IsEdit">
   View Mode
</div>

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

app.controller("myCtrl", function ($scope) {

  $scope.IsEdit = false;

  $scope.GetTemplate = function () {
    console.log($("#Template").html());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div id="Template" ng-app="myApp" ng-controller="myCtrl">

<div ng-show="IsEdit">
  Edit Mode
</div>
<div ng-show="!IsEdit">
  View Mode
</div>

<button ng-click="GetTemplate()">Get HTML</button>
</div>

Answer 1

Попробуйте, мы используем ng-if, чтобы полностью удалить его в DOM.

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

app.controller("myCtrl", function ($scope) {

  $scope.IsEdit = false;

  $scope.GetTemplate = function () {
    angular.element('#Template').contents().filter(function(){ return this.nodeType == 8;}).remove(); // <--- to remove comments
    console.log(angular.element('#Template').html());
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div id="Template" ng-app="myApp" ng-controller="myCtrl">

<div ng-if="IsEdit">
  Edit Mode
</div>
<div ng-if="!IsEdit">
  View Mode
</div>

<button ng-click="GetTemplate()">Get HTML</button>
</div>