5

ディレクティブによって管理される要素に単純な ng-mouseover バインディングを追加しようとしています。しかし、それを機能させることはできません。

@ http://jsbin.com/aqibij/2/edit

ng-mouseover バインディングを追加した後、要素を再コンパイルしようとしました。directive.compile と外部コントローラーは実行されますが、directive.linker は実行されません。

@ http://jsbin.com/ikebed/1/edit

$compile'ing をリンカーに移動しました。正常に動作し、ng-mouseover は正常に動作しますが、リンカーで再コンパイルすると無限ループが発生し、最後にブラウザーがクラッシュします:)

ディレクティブを使用して要素に ng-* バインディングを追加するにはどうすればよいですか? これらのアプローチで何が間違っていますか?

4

1 に答える 1

4

あなたは私と同じ船に乗っていると思っていましたが、そうではないかもしれません。いずれにせよ、ここに2つの解決策があります。私は2番目に立ち往生しました。

1) 特定の要素に対する指令

扱っている要素がdiv、span、h1などになることがわかっている場合、またはそれは問題ではありません（1つの要素を取り、それを必要なものに置き換えます）。

HTML

<div data-mydirective>
    <span>some other stuff</span>
    <div>more stuff</div>
</div>

指令

module.directive( 'mydirective', [ function() {
    return {
        restrict: "A",
        controller: function( $scope ) {
            $scope.test = function() {
                console.log('howdy');
            }
        },
        template: "<div data-ng-transclude data-ng-mouseover='test()'></div>",
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }
    };
}]);

出力

<div ng-mouseover="test()" data-ng-transclude="" data-mydirective="">
    <span class="ng-scope">some other stuff</span>
    <div class="ng-scope">more stuff</div>
</div>

2) 不特定要素のディレクティブ

これが私が直面していた問題です。ng-*基本的に、h1、h2、span、div、nav などにあるディレクティブがあり、ディレクティブ内から属性を追加したい場合。

template要素が何であるかがわからないため、 a を使用できません。を取り、それを右h1に置き換えたくないですか？divこれが、私がコンパイルルートを下っていた理由です。は、template実際にアクセスできる関数にすることができelementますattrs。

指令

module.directive( 'mydirective', [ function() {
    return {
        restrict: "A",
        controller: function( $scope ) {
            $scope.test = function() {
                console.log('howdy');
            }
        },
        template: function( element, attrs ) {
            var tag = element[0].nodeName;
            return "<"+tag+" data-ng-transclude data-ng-mouseover='test()></"+tag+">";
        },
        transclude: true,
        replace: true,
        link: function ( scope, element, attrs ) {

        }       
    }   
}]);

HTML/出力

同上。divHTMLの要素を に変更するnavと、出力に変更が反映されます。

于 2013-11-22T07:20:45.020 に答える