Question

鉴于AngularJS模板变量在框架中输入时会自动扩展。

例如：

app.controller( "myCtrl", function($scope){
   $scope.myVar = "Some Text";
});

以下HTML将正确扩展

<span>{{myVar}}</span>

到

<span>Some Text</span>

如果我想将var名称存储为字符串的一部分，如何让模板完成此操作：

app.controller( "myCtrl", function($scope){
   $scope.text = "This is quite {{myVar}}";
   $scope.myVar = "Some Text";
});

不幸的是，

<span>{{myVar}}</span>

变为

<span>This is quite {{myVar}}</span>

有没有简单的方法在模板中执行此操作？我已尝试在控制器中使用$ interpolate服务，但鉴于我将范围对象（从另一个闭包）传递给模板，$ interpolate更新原始对象并导致我出现问题。如果有一种简单的方法可以按值（而不是通过引用）返回一个对象，它将使用$ interpolate解决我的问题，但目前我无法弄清楚如何做到这一点。

Answer 1

这个怎么样：

app.controller( "myCtrl", function($scope){
   $scope.myVar = "Some Text";
   $scope.text = "This is quite " + $scope.myVar;
});

参与演示：http://plnkr.co/edit/be374h7fXpY5YZjpe70n?p=preview

Answer 2

在这种情况下，可以在指令的帮助下完成。诀窍是在这种情况下使用$ compile服务。

我为此创建了plunker。

指令代码：

app.directive('renderText',function($compile){
  var linker = function(scope,element,attr){
    var template = scope.item;
    scope.$watch('template',function(){
                element.html(template);
                $compile(element.contents())(scope);
            }); 
  }
  return {
    restrict: 'A',
    replace: true,
    link:linker,
    scope: { 
             item:'=item',
             myVar: '=replace'
            }
    };
});

Answer 3

我最终使用angular.copy创建$scope.text的本地副本，以便通过$ interpolate服务对其进行的任何更改都不会影响我的原始对象。

如何在AngularJS中双重扩展变量名

3 个答案: