3

ディレクティブのリンク関数で二重バインディングを解決しようとしています:

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

テンプレートは<div>{{ b }}</div>

のようにレンダリングされます<div>{{ a }}</div>

ビューを表示することは可能<div>surprise</div>ですか? ディレクティブを再コンパイルしようとしましたが、bバインドされると、コンテンツは文字列になり、angularJS はそれらをバインドしようとしなくなります。

4

3 に答える 3

2

元の投稿は私の問題を単純化したものです。基本的に、特定の要因によって値が異なるため、スコープ内の文字列{{ foo }}をテンプレート (たとえば、投稿) の変数に割り当てる必要がありました。{{ b }}

@AjayBenival が述べたように、単純なケースは関数で解決されます。これは基本的には

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 }}`
        });
    }
于 2013-07-30T13:16:12.470 に答える
2

1 つの方法は、直接値ではなく関数を補間することです。

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

          }

 <div>{{ b() }}</div>
于 2013-07-30T11:40:58.073 に答える
1

現在のスコープ内で値を補間できるカスタム フィルターを作成します。

テンプレート内: (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

于 2015-03-30T17:20:22.367 に答える