9

したがって、カスタム コンポーネントに関するこの EggHead.io チュートリアルに従っていますが、この問題に遭遇しました。次のようなディレクティブを宣言する場合:

angular.module('myApp', [])
    .directive('myDir', function(){
        return {
            restrict: "E",
            controller: "myController",
            link: function(scope, element, attrs) {
                scope.foo = element.text();
            },
            templateUrl: "myDirTemplate.html"
        }
    });

テンプレートは次のとおりです。

<div>The value is: {{foo}}</div>

および次のように使用されているディレクティブ:

<html>
...
<myDir>Bar</myDir> 
...
</html>

リンク関数の要素は、

<div>The value is: {{foo}}</div>

テンプレートで。templateUrlを指定しない場合、要素は

<myDir>Bar</myDir>

メインビューで、これが私が欲しいものです。ディレクティブが「Bar」テキストを取得して {{foo}} に挿入し、次の最終結果が得られることを期待していました。

<div>The value is: Bar</div>

しかし、毎回テンプレートの要素を選択する角度を回避する方法がわかりません。

何か案は？

4

1 に答える 1

22

ngTranscludeを使用する必要があります:

app.directive('myDir', function(){
  return {
    restrict: "E",
    transclude: true,
    templateUrl: "myDirTemplate.html",
    replace: true
  }
});

外部テンプレートは次のようになります。

<div>The value is: <span ng-transclude></span></div>

ここで動作するコードを表示: http://plnkr.co/edit/EuT5UlgyxgM8d54pTpOr?p=preview

于 2013-04-20T01:23:48.397 に答える