angularjs - Double indirection in data-binding. Interpolate string in a template

Question

I'm trying to resolve double binding in the link function of a directive:

scope.a = "surprise";
scope.b = "{{ a }}";

the template is <div>{{ b }}</div>

it's rendered like <div>{{ a }}</div>

is it possible to get the view to display <div>surprise</div> ? I've been trying to recompile the directive, but once b is binded, contents are a string and angularJS won't attempt any more to bind them.

Answer 1

一种方法是插值函数而不是直接值

  function test($scope) {
              $scope.a = "surprise";
              $scope.b = function () {
                  return $scope.a;
              };

          }

 <div>{{ b() }}</div>

Answer 2

原始帖子是对我的问题的简化。基本上我在范围内的字符串{{ foo }}必须分配给模板中的变量（例如，{{ b }}在帖子中），因为值因某些因素而异。

正如@AjayBeniwal 提到的，一个简单的案例是用一个函数解决的。这与基本相同

function test($scope) {
    var foo = "surprise";
    $scope.b = function () {
       return foo;
    };
 }

但foo我得到了对象的一个​​属性，而不是 ，我scope在一个函数上进行了插值。

我所做的是观察字符串的变化。在模板字符串中查看指令未插值

return {
    template: '<div class="caption">{{ caption }}</div>',
    link: function (scope, element, attrs) { 
        scope.caption = fooService.computeCaption(); // here caption is set to a string '{{ bar }}'

        scope.$watch('caption', function(newValue) {
           scope.caption = newValue;
           $compile(element.contents())(scope); // resolve (interpolate?) the string `{{ bar }}`
        });
    }

Answer 3

创建一个可以在当前范围内插入值的自定义过滤器。

在您的模板中：（this指当前范围）

{{ b | interpolate:this }}

过滤器的实现很简单：

app.filter('interpolate', function($interpolate) {
    return function(expression, context) {
        return $interpolate(expression)(context);
    };
});

工作示例： http: //jsbin.com/gegeji/1/edit ?html,js,output