Angular js用令牌替换html字符串答案

【问题标题】：Angular js Replace html string with TokensAngular js用令牌替换html字符串
【发布时间】：2017-08-18 03:33:45
【问题描述】：

我有一个来自模型的值，它是一个相对较大的 html 字符串。它还有一个标记，需要用来自 Angular 的值替换。我想看看如何让两头都满足。

我的 HTML

<h2 class="sub-title"> @Model.WelcomeText </h2>

现在这个欢迎文本是一个相对而言具有标记的 html 字符串。像这样的

 "Hi @@Name , Welcome to our Website. Click <a href='#'> here </a>
 for more details. <small> For more details please visit blah blah
 </small>

现在我需要用我的控制器中的模型值替换@@Name - $scope.Name

我试过了

<h2 class="sub-title" ng-init= $scope.welcomeText('@Model.WelcomeText') </h2>

然后在我的控制器中

function welcomeText(str)
{
  return str.replace('@@Name',$scope.Name);
}

但由于 $scope.welcomeText 在 ng-init 中有无效值，它会在 html 本身中中断

关于如何实现这一点的任何指示？ Model.Title 来自 Sitecore CMS。我在 JS 中没有那个价值

【问题讨论】：

为什么不在 $scope 中创建一个变量为 welcomeText 并且 getter 应该具有逻辑或将 @@Name 替换为 $scope.Name ，然后以角度方式而不是 @987654326 使用它@ 使用 ng-model=$scope.welcomText .
@PM。我不能。我在 Js 中没有价值。我实际上，值 Model.Title 来自 CMS 系统。
您是否考虑过从 Sitecore 公开一个您可以在 Angular 中使用 AJAX 调用的 RESTful 服务？这将替换您的 Razor 代码 @Model.WelcomeText。
@DougCouto - 我考虑过，但这对于简单的标题文本来说太昂贵了。我做了其他事情并且奏效了。我已经回答了这个问题。不是最好的解决方案，但有效..

标签： c# angularjs sitecore

【解决方案1】：

我最终这样做了。不确定这是否是理想的解决方案，但至少它有效。

    //Added a div with hidden class to get the value.      
    <div class="hidden" id="inp-title-server" /> @Model.Title  </div>
    <h2 class="sub-title" data-ng-bind-html="$scope.header"></h2>

然后在我的控制器中，

var title = $("#inp-title-server").text();
$scope.header = title.replace('@@Name', $scope.Name);

【讨论】：

【解决方案2】：

你可以简单地使用字符串的替换功能。

angular.module("app",[])
  .controller("ctrl",['$scope',function($scope){
 $scope.WelcomeText = "Hi @@Name , Welcome to our Website. Click <a href='#'> here </a> for more details. <small> For more details please visit blah blah </small>";
 $scope.UserName = "ABC";
 $scope.WelcomeText = $scope.WelcomeText.replace("@@Name",$scope.UserName);
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>   
<html>
<body ng-app="app" ng-controller="ctrl">
  <h4 class="sub-title" ng-bind="WelcomeText"> </h4>    
</body>
<html>

【讨论】：

我不能，因为我从服务器获取值。在 Javascript 中没有该值。