angularjs：ディレクティブのネストされたDOM要素をテンプレートとして使用する方法はありますか？

下記のコードを参考にしてください。angularjs：ディレクティブのネストされたDOM要素をテンプレートとして使用する方法はありますか？

ng-trascludeは、追加のラッピング要素として使用しないでください。+ ng-transcludeは独自のスコープを作成します。だから私の目標は最後に<div foo title="FOO!">FOO!</div>をレンダリングすることです。

$compile(el.html())(scope)また、折り返し要素が必要です。

template: "<div ng-transclude></div>"は、scope.titleにアクセスできません。

おかげ

EDIT を追加しましたplunkerリンク：https://plnkr.co/edit/R1CAc5pksOVMJoFLhsTu?p=preview 私は属性ように、分離株の範囲を保持したいと思い

angular.module('app', []).directive('foo', function() { 
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
      title: '@' 
 
     } 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div foo title="FOO">{{title}}</div> 
 
    <span>expecting "FOO!" above this line, but, sigh...</span> 
 
    </body> 
 
</html>

EDIT 2

スニペット（<div foo title="FOO!">{{title}}</div>a scope: {title:'@'}を介して適用されます。

編集3

スニペットを更新しました。

出典

2017-07-12 Aleksandr Makov

scope.fooをレンダリングするテンプレートが必要なので、テンプレートを指定する必要があります。あなたが親から任意の値を持っているつもりされていない場合も、あなたはディレクティブのために孤立範囲を割り当て

angular.module('app', []).directive('foo', function() { 
    return { 
     restrict: 'A', 
     template: '<span ng-bind="foo"></span>', // <-- add this line 
     link: function(scope, el) { 
      scope.foo = 'FOO!'; 
     } 
    } 
});

出典

2017-07-12 13:12:14 Ero

すでにあなたのため作成されるスコープとしてscope: {}を配置する必要はありません。アクセスしたい場合はscope : trueでローカルにします。

angular.module('app', []).directive('foo', function() { 
 
    
 
    return { 
 
     restrict: 'A', 
 
     scope: { 
 
      title : '=' 
 
     }, 
 
     template : '{{title}}' 
 
    } 
 
});

<!DOCTYPE html> 
 
<html ng-app="app"> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 
    </head> 
 
    <body> 
 
    <div foo title="'Foo!'"></div> 
 
    <span>expecting "FOO!" above this line, but, sigh...</span> 
 
    </body> 
 
</html>

出典

2017-07-12 13:13:45

感謝をしてみてください、ええ、私は手動でスコープに属性を割り当てる必要がありますそのように、IG： '$ scope.title = $ attrs.title ; '代わりに' scope：{title： '@'} 'と一緒に'

'を使うことができました。 –

質問が更新されました。 –

@AleksandrMakov - あなたがチェックしたばかりの答えを更新しました –

それに

link: function(scope, el,attr) { 
      scope.$parent.foo = "foo" 
      scope.foo = 'FOO!'; 
      }

出典

2017-07-12 13:21:20

あなたの答えには何か説明する必要があります。 – Boiethios

angularjs：ディレクティブのネストされたDOM要素をテンプレートとして使用する方法はありますか？

答えて

関連する問題