Question

我正在尝试在指令的链接函数中解析双重绑定：

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

模板为<div>{{ b }}</div>

它呈现为<div>{{ a }}</div>

是否可以让视图显示<div>surprise</div>？我一直在尝试重新编译该指令，但是一旦绑定b，内容就是一个字符串，angularJS将不再尝试绑定它们。

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，而是对函数进行插值。

我所做的是观察字符串的变化。见directive not interpolating, in a template string

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

数据绑定中的双重间接。插入模板中的字符串

3 个答案: