2

参照

参照プランカー: http://plnkr.co/edit/otv5mVVQ36iPi3Mp0FYw?p=preview

問題の説明

と の 2 つのディレクティブがあるfirst-directiveとしsecond-directiveます。ここで、ラップして独自の操作された属性に渡すことfirst-directiveを望んでいるアクセスしかないとします。second-directive

app.directive('firstDirective', function() {
  return {
    scope: true,
    priority: 1000,
    transclude: true,

    template: function(element,attributes){
      console.log('template')
      return '<second-directive two="{{one}}"></second-directive>'
    },

    compile: function(element,attributes) {
      console.log('compile')
      return {
        pre: function(scope){
          scope.one = 'foo'
            console.log('cpre')
        },
        post: function(scope){
          scope.one = 'foo'
            console.log('cpost')
        },
      }
    },

    controller: ['$scope','$attrs',function($scope,$attrs){
      console.log('controller');
      $scope.one = 'foo';
    }],
  }
})

app.directive('secondDirective',function(){
  return {
    template: function (element,attributes){
      console.log(attributes.two) //{{one}} not 'foo' or 'test'
      return 'Hello {{two}}'
    }
  }
});

first-directive次のように呼び出されます。

<first-directive one='test'></first-directive>

console.log は次のように出力されます。

template
compile
{{one}}
controller
cpre
cpost

このことから、コンパイル前にテンプレートが呼び出されることを学びました。これは、コンパイル、コントローラー、プリ、またはポスト リンクを介してテンプレート関数によって返された値を操作する方法がないため、私の初心者の目には独特です。

質問はこれです：

必要な動的属性値でを呼び出すにはどうすればよいsecond-directiveですか? second-directiveは完全に独立しており、そこにコードを追加できないことに注意してください。

PS - 私が考えている考えの 1 つは、次のように 2 番目のディレクティブを呼び出すことです。

template: function(element,attributes){
  console.log('template')
  var explicit = ???? /* how to access scope? */
  return '<second-directive two="'+ explicit +'"></second-directive>'
},

または代わりに

template: function(element,attributes){
  console.log('template')
  return $interpolate('<second-directive two="{{one}}"></second-directive>')(scopeObj) /* how does one access scopeObj with current scope values here? */
},

繰り返しますが、他の関数が呼び出される前に first-directive に渡される値を取得する方法がわかりません。コントローラーは $scope にアクセスでき、AFTER テンプレートと呼ばれます。

あなたの提案は大歓迎です。

4

5 に答える 5

0

持っていますがtransclude: true、テンプレートで使用していません。このマークアップを使用して、最初のディレクティブ用のテンプレートを使用することはできません<ng-transclude>か? scope: true親/コントローラーからプロパティを操作するだけで、変更が両方のディレクティブに反映されます。

マークアップ

<first-directive one="test">
    <second-directive two="test"></second-directive>        
</first-directive>

最初のディレクティブのテンプレート

template: `<div>
               my first directive content
               <ng-transclude></ng-transclude>
           </div>`;

https://docs.angularjs.org/api/ng/directive/ngTransclude

于 2016-05-12T17:08:03.300 に答える
0

テンプレート内のスコープにアクセスすることはできません (その時点でスコープがないため)。テンプレートを使用して 1 つまたは複数の要素を作成し、スコープにリンクします (コントローラーがインスタンス化された後、存在する場合)。

ディレクティブ間で値を渡す方法は多数あり、それぞれが特定の目的に最適です。最も簡単な方法 (ただし、ユースケースの詳細によっては必ずしも最適とは限りません) は、ラッパー ディレクティブのスコープに値を割り当て、内部ディレクティブがスコープからそれを読み取れるようにすることです。

<!-- HTML -->
<one for-two="{{test}}"></one>

// JS
angular.
  module('myApp', []).
  directive('one', oneDirective).
  directive('two', twoDirective);

function oneDirective() {
  return {
    restrict: 'E',
    scope: true,
    link: function onePostLink(scope, elem, attrs) {
      scope.two = attrs.forTwo;
    },
    template: '<two></two>'
  };
}

function twoDirective() {
  return {
    restrict: 'E',
    template: 'Hello, {{two}} !'
  };
}
于 2015-06-16T12:27:37.693 に答える
0

私はあなたの質問を使用して学習していますが、これを見つけることができました。これはあなたに役立つかもしれません:

app.directive("tryThis", function($compile){
    return{
        scope: {
          one: '@',
        },
        link: function(scope, element){
            var template = '<second-directive two="'+scope.one+'"></second-directive>';
            var linkFn = $compile(template);
            var content = linkFn(scope);
            element.append(content);
        }
    }
});

Plunkr はここtestにあります。ではなくコンソールにログインしていることに注意してください{{one}}。secondDirective に分離スコープが指定されている場合はtest、画面に表示されます。

このリンクは、直面している問題を概念的に理解するのにも役立ち、「コンパイル中にスコープがない」ステップの問題にいくつかのコンテキストを提供します-これを回避する方法があるかどうかはわかりません.

于 2015-06-16T00:39:00.980 に答える