个人中心
gpt4 book ai didi

html - AngularJS 编译模型类似于 StackOverflow

转载 作者：行者123 更新时间：2023-11-28 03:32:19 24 4
gpt4 key购买 nike

大家好，现在我正在尝试使用 angularJS 创建一个像这样的文本框 (stackoverflow textbox) .. 但我在这样做时遇到了困难，我必须替换 * *SOME TEXT HERE** 到 strong SOME TEXT HERE/strong 这是我的代码..

$(document).ready(function() {
  var app = angular.module("appModule", [], function($interpolateProvider) {
    $interpolateProvider.startSymbol('<%');
    $interpolateProvider.endSymbol('%>');
  });

  /* ALLOW ANGULAR TO RENDER HTML OUTPUT */
  app.directive('compile', ['$compile', function($compile) {
    return function(scope, element, attrs) {
      scope.$watch(function(scope) {


          return scope.$eval(attrs.compile);
        },
        function(value) {
          element.html(value);
          $compile(element.contents())(scope);
        }
      )
    };
  }]);

  /* CONTROLLER FOR PROFILE TICKER */
  app.controller("ProfileTickerController", function($rootScope, $scope, dataService, FileUploader) {
    // INITIAL VALUES FOR PROFILE TICKER
    $scope.ticker = '';
    $scope.previous = '';
    $scope.edit = false;

    $scope.editTicker = function() {
      $scope.previous = $scope.ticker;
      if ($scope.ticker == "<span class='color-light-grey'>Ticker not set</span>") {
        $scope.ticker = "";
      }
      $scope.edit = true;
    }

    $scope.cancelEdit = function() {
      $scope.ticker = $scope.previous;
      $scope.edit = false;
    }

    $scope.saveTicker = function() {
      if ($scope.ticker == "") {
        $scope.ticker = "<span class='color-light-grey'>Ticker not set</span>";
      }
      $scope.edit = false;
    }

    $scope.$watch('ticker', function() {
      if ($scope.ticker == undefined) {
        $scope.ticker = "";
      }
    })

    $scope.init = function(id) {
      var postData = 'profileID=' + id;

      // SETUP AJAX CONFIG
      var config = {
        "method": "POST",
        "url": "ajax/getTicker.php",
        "data": postData,
        "headers": {
          'X-Requested-With': 'XMLHttpRequest',
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      };

      // AJAX TO GET PROFILE TICKER
      dataService.ajaxThis(config).then(function mySuccess(response) {
        // CHECK IF AJAX SUCCESSFUL
        if (response.status != 200) {
          console.log('Ajax error! Profile ticker not fetched. Please reload the page and try again.');
        } else {
          // GET PROFILE TICKER
          if (response.data == "") {
            $scope.ticker = "<span class='color-light-grey'>Ticker not set</span>";
          } else {
            $scope.ticker = response.data;
          }

        }
      });
    }

    $scope.$on('profileLoaded', function(e, id) {
      $scope.init(id);
    });
  });
})
.textarea-non-resize {
	resize: none;
}

.grey-box {
    background: #efefef;
    border: 1px solid #dedede;
    padding: 10px;
}

#ticker {
	height: 42px;
	background-color: #fff;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
}
<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

</head>

<script src="script.js"></script>

<body ng-app="appModule" class="ng-scope">

  <div class="row">
    <div class="col-xs-12 col-sm-12" ng-controller="ProfileTickerController">
      <div class="form-group">
        <label for="subject">
                        Ticker 
                        <span ng-show="!edit">
                            <a href="javascript:void(0);" title="Edit Ticker" ng-click="editTicker()"><i class="glyphicon glyphicon-pencil"></i></a>
                        </span>
                        <span ng-show="edit">
                            <a href="javascript:void(0);" title="Save Ticker" ng-click="saveTicker()"><i class="glyphicon glyphicon-ok"></i></a> 
                            <a href="javascript:void(0);" title="Cancel" ng-click="cancelEdit()"><i class="glyphicon glyphicon-remove"></i></a>
                        </span>
                    </label>
        <textarea name="ticker_edit" id="ticker_edit" class="form-control textarea-non-resize" ng-model="ticker" ng-show="edit" placeholder="Customize your ticker here" required cols="50" rows="4" style="margin-bottom: 10px;"></textarea>
        <div class="grey-box">
          Preview:
          <div id="ticker" class="text-center">
            <h3 compile="ticker"></h3>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

这里有一个脚本错误，但它在我的电脑上运行良好。那么无论如何，我将如何使用该编译器替换上面所说的字符串？

最佳答案

在将值注入(inject)元素的 HTML 之前使用 Regex 替换值怎么样？

// replace bold text
value = value.replace(/\*\*(.*)\*\*/g, "<strong>$1</strong>");

上面是一个简单的例子，您可能需要稍微调整一下以适应您的目的，但总体思路就在那里。

关于html - AngularJS 编译模型类似于 StackOverflow，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44666137/

24 4 0
文章推荐： c++ - 在 Qt Gui 中如何使按钮在每次点击时随机出现
文章推荐： c++ - 如何在 Doxygen 中为不同范围的模板值添加行为描述？
文章推荐： javascript - jquery mobile 试图打开同一页面中的所有链接
文章推荐： javascript - 我有一段代码试图让一个盒子移动，但它不起作用。语言为HTML5，代码如下
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com