5

ディレクティブを使用し、コンテンツをトランスクルードし、トランスクルードされた部分内でディレクティブのコントローラー メソッドを呼び出したい:

<mydirective>
  <div ng-click='foo()'>
    click me
  </div>
</mydirective>


app.directive "mydirective", ->

  return {
    restrict:  'EACM',
    transclude: true
    template: "<div ng-transclude></div>"
    scope: { } #required: I use two way binding on some variable, but it's not the question here

    controller: [ '$scope', ($scope)->
      $scope.foo = -> console.log('foo')
    ]
  }

ここでplunkr。

どうすればそれができますか？

4

3 に答える 3

3

これは少しトリッキーです。トランスクルードされたスコープはディレクティブ スコープの子ではなく、兄弟です。したがって、トランスクルードされた要素fooからアクセスするには、正しいスコープ、つまりディレクティブ スコープの兄弟に割り当てる必要があります。トランスクルードされたスコープは関数内で作成されていないため、必ず関数からアクセスしてください。ng-clickfoolinkcontroller

デモリンク 

var app = angular.module('plunker', []);
app.directive("mydirective", function(){
  return {
    transclude: true,
    restrict: 'EACM',
    template: "<div> {{ name }} <br/><br/> <div ng-transclude> </div></div>",
    scope: { },
    link: function($scope){
      $scope.name = 'Should change if click below works';
      $scope.$$nextSibling.foo = function(){
        console.log('foo');
        $scope.name = 'it works!';
      }
    }
  }
})

foo別の方法は、プロトタイプとして親スコープから継承するため、親スコープに割り当てることです。つまり、

$scope.$parent.foo = ...
于 2013-08-30T21:48:00.037 に答える
0

技術的には、 を削除するscope: { }と、ディレクティブが分離スコープを作成しないため、機能するはずです。restrict: "E",（ところで、ディレクティブを要素として使用するため、追加する必要があります）

親スコープからディレクティブ内のアクションを呼び出すよりも、親スコープで定義されたアクションをディレクティブから呼び出す方が理にかなっていると思います。自己完結型で再利用可能なDirectiveものでなければなりません。ディレクティブ内のアクションは、外部からアクセスできないようにする必要があります。

本当にやりたい場合は、 を呼び出してイベントを発行$scope.$broadcast()し、ディレクティブにリスナーを追加してみてください。それが役に立てば幸い。

于 2013-08-30T21:19:37.193 に答える