大家好，现在我正在尝试使用 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/