Question

大家好日子，现在我正在尝试使用angularJS创建一个像(stackoverflow textbox)这样的文本框..但是我很难这样做，我必须将**SOME TEXT HERE**替换为{{1}这是我的代码..

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;
}

这里有一个脚本错误，但它在我的计算机上运行正常。那么无论如何我如何使用该编译器替换上面的字符串？

Answer 1

在将值注入元素的HTML之前，如何使用正则表达式替换值？

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

以上是一个简单的例子，您可能需要调整一下以适合您的目的，但总的想法就在那里。

AngularJS编译模型与StackOverflow类似

1 个答案: