Question

我尝试实现的功能是切换视图源按钮，以便用户可以查看给定元素的来源，然后复制文本。

使用ngRoute模块，我的观点来自ng-view：

<div id="code" ng-view=""></div>

我希望将HTML输出到：

<div id="html-text-output"></div>

我已尝试使用$ sanitize功能，但我不确定它是否适合我的解决方案。以下是我控制器中当前的代码：

angular.module('App')
.controller('outputHtmlCtrl', function ($scope, $element, $sanitize) {
  $scope.isOutputToggled = true;

  var sanatizedHtml = $sanitize($('#email-frame-code').html());

  $scope.toggleHtmlOutput = function() {            
    $scope.isOutputToggled = $scope.isOutputToggled === false ? true: false;
    $('#html-text-output').append("<div>"+"'"+sanatizedHtml+"'"+"</div>");
  }
});

我的标记如下：

<div id="email-frame-code__container" ng-controller="outputHtmlCtrl">
  <div class="browser-header">
    <span class="browser-header__icon" ng-click="toggleHtmlOutput()"></span>
  </div>

  <div id="email-frame-code" ng-class="{closed: isOutputToggled}">
    <div id="html-text-output"></div>
    <div id="code" ng-view=""></div>
  </div>                
</div>

我的最终目标就像“幻想版”＆＃39;在这里：https://css-tricks.com/examples/ViewSourceButton/

但是在目标元素上，而不是整个页面。

使用AngularJS查看源代码功能

0 个答案: