如何使用新创建的范围 $compile AngularJS 模板？答案

【问题标题】：How to $compile an AngularJS template using a newly created scope?如何使用新创建的范围 $compile AngularJS 模板？
【发布时间】：2014-10-30 08:50:21
【问题描述】：

我正在创建一个弹出模式，我希望它能够使用新创建的$scope 进行动态更新。我想做这样的事情：

var myNewScope = $scope.$new();
myNewScope.name = 'Jack';

ModalService.open('Hello, {{ name }}', myNewScope);

然后在我的ModalService.open 方法中，我想像这样编译具有给定范围的字符串

// ... other service stuff

service.open = function(template, scope){
    var compiledText = $compile(template)(scope);
    // I want compiledText = 'Hello, Jack'
}

【问题讨论】：

哦，我刚刚意识到，如果我将模板包装在像ModalService.open('<h1>Hello, {{ name }}</h1>') 这样的实际 DOM 元素中，它确实有效。为什么它需要这样？如果我只想要没有实际元素的字符串怎么办？
不清楚你想要什么。根据问题和您自己的答案，您似乎想要$interpolate。另一方面，“动态更新”不适用于您的答案。我想知道你为什么要自己插入文本。

标签： angularjs

【解决方案1】：

Welp...我认为 Angular 没有内置的方法来做到这一点..所以我只是构建了自己的版本。

app.controller('TestController', function($scope, $compile){

  var scope = $scope.$new();
  scope.percentage = {Value:55};
  scope.name = 'Jack';

  var msg = 'We are at {{ percentage.Value }}% done, {{ name }}.. {{ 4/3 }}';

  var element = msg.replace(/{{\s*([a-zA-Z0-9+-/*//\s.]*)\s*}}/g, function($0, $1){
    return scope.$eval($1);
  } );

  console.log(element); // prints 'We are at 55% done, Jack.. 1.3333333333333333' 
});

这似乎工作得很好

【讨论】：