在双间接数据绑定。在模板字符串插值 [英] Double indirection in data-binding. Interpolate string in a template

问题描述

我试图解决一个指令的链接功能双重约束：

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

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

该模板是＆LT; D​​IV＆GT; {{B}}＆LT; / DIV＆GT;

它呈现像＆LT; D​​IV＆GT; {{A}}＆LT; / DIV＆GT;

是有可能得到视图中显示＆LT; D​​IV＆GT;＆惊喜LT; / DIV＆GT; ？
我一直在试图重新编译指令，但一旦 B 被绑定，内容是一个字符串，angularJS不会尝试任何更多的束缚。

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.

推荐答案

原来的岗位是我的问题的简化。基本上我在范围字符串如 {{富}} 的有模板被分配到一个变量（例如， {{B }} 在后），因为该值取决于某些因素是不同的。

The original post is a simplification of my problem. Basically I had in the scope strings like {{ foo }} that had to be assigned to a variable in the template (for example, {{ b }} in the post), because the value is different depending on certain factors.

正如@AjayBeniwal提到的，一个简单的例子是解决与功能。这是基本相同

As @AjayBeniwal mentioned, a simple case is solved with a function. This is basically the same as

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

但不是富，我得到了范围对象的属性，我插一个函数。

but instead of foo, I got a property of the scope object and I interpolate on a function.

我所做的却是看字符串的变化。见<一href=\"http://stackoverflow.com/questions/15485288/directive-not-interpolating-in-a-template-string\">directive不插在一个模板字符串

What I did instead is to watch for changes in the string. See 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 }}`
        });
    }

这篇关于在双间接数据绑定。在模板字符串插值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！