10

こんにちは、私が取り組んでいるこの「確認可能な」ボタン ディレクティブがあります。

ディレクティブ「confirmable」をトリガーする html コード

      <span confirmable ng-click='users.splice($index,1)'></span>

ディレクティブ: (coffeescript)

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes

したがって、このディレクティブで生成される最終結果は

      <button class='btn btn-mini btn-danger' ng-click='users.splice($index,1)'>
        Destroy
      </button>

これまでのところ、ディレクティブ内のリンク関数で動作するようになりました

  angular.module('buttons',[])

  .directive 'confirmable', () ->
    template: """
      <button class='btn btn-mini btn-danger'>
        Destroy
      </button>
    """
    replace: yes
    link: (scope, el, attrs) ->               <---------- linking function
      $(el).attr 'ng-click', attrs.ngClick

しかし、ディレクティブのドキュメントをもう一度調べたところ、=、@、& 演算子を含むスコープ プロパティが見つかりましたが、それらが必要なものかどうかは本当にわかりません。それから、私がまだ理解する必要があるこのtranscludeプロパティがありますが、現時点ではどちらも役に立たないようです. したがって、私のリンク機能は今のところうまくいきますが、角度がよりエレガントなソリューションを提供するかどうかを確認する必要があると思いました.

ありがとう！

4

3 に答える 3

6

ディレクティブ内から親スコープからメソッドを呼び出したいように思えます...

ここにプランクをまとめました

（すみません、私はJavaScriptが好きです...だからここに行きます）

これが親コントローラーです。

app.controller('ParentCtrl', function($scope) {
    $scope.fooCalled = 0;
    $scope.foo = function() {
        $scope.fooCalled++;
    };
});

次に、あなたのマークアップ

<div ng-controller="ParentCtrl">
   Foo Called: {{fooCalled}}<br/>
   <button ng-click="foo()">Call From Parent</button><br/>
   <custom-control custom-click="foo()"></custom-control>
</div>

そしてあなたの指令宣言：

app.directive('customControl', function(){
   return {
     restrict: 'E',
     scope: {
        innerFoo: '&customClick'
     },
     template: '<button ng-click="innerFoo()">Call From Control</button>'
   };
});

ディレクティブ定義の宣言のビットはscope、親スコープ関数の参照をディレクティブのスコープに結び付けて、クリック時に呼び出すことができるようにするものです。それ&がそこにあるものです。

于 2012-10-23T22:11:19.163 に答える
1

あなたはそれを正しくやっています。コントローラーは、ディレクティブ間で共通の機能を共有するためのものです。ここでは必要ありません。また、このケースは非常に単純であるため、リンク関数も必要ありません。

http://jsfiddle.net/V7Kpb/12/

リンク段階でディレクティブ属性をコピーしても、Angular に関する限り、何もしません。属性を持つボタンが表示ng-clickされますが、これは Angular が DOM を処理した後に追加されたものです。

またelement、リンク関数の 2 番目のパラメーターは既に jQLite であるため (リンクされている場合はおそらく完全な jQuery です)、jQuerify する必要はありません。

また、スコープの分離（=、@、および言及）についても説明します。これは美しいエレガントな構文ですが、大きな欠点は、同じ要素の他のディレクティブもスコープから分離されることです。そのため、一般的な ngModel を使用する場合は、isolate スコープを使用できません。実際、この場合でも、isolate スコープを使用すると ng-click が機能しなくなります。scope{} プロパティで明示的に宣言されていないものを含む式を評価しようとするためです。

于 2012-10-24T05:10:41.800 に答える