0

モデルの値に応じて表示または非表示にしたいアンカー タグがあります。

<table>
    <tr ng-repeat="item in items">
        <td>Other Stuff</td>
        <td>
            <a href="#/somewhere" ng-show="model.showIt" myCustomDir="some value" onClick="bar(item)" />
        </td>
    </tr>
</table>

今、私のディレクティブには次のものがあります。

app.directive('myCustomDir', function() {
    var def = {
        restrict: 'A',
        scope: {
            onClick: "&"
        },
        link: function(scope, element, attrs) {

            var hover = angular.element("<div><b>Some Text</b></div>");
            var button = hover.find('b');

            button.on('click', function() {
               scope.$apply(function() {
                   scope.onClick();
               })
            });
        }
    };

    return def;
})

問題は、ディレクティブを含めるとすぐに、動作しなくなったと思われる ng-show ディレクティブです。これは、ディレクティブが分離スコープで動作するため、親スコープのモデルが存在しなくなったためです。

タグがクリックされたときに呼び出したいメソッドを誰かに許可しながら、ディレクティブを ng-show でうまく再生するにはどうすればよいですか。

興味のあるすべての人のためのプランカー。http://plnkr.co/edit/BLMCgB

4

2 に答える 2

2

You ディレクティブは分離スコープを作成します。$parentしたがって、現在のリピーターアイテムの値を取得するために使用する必要があります

ng-show="$parent.item.visible"

より一般的なものにしたい場合は、スコープを外して他のディレクティブと互換性を持たせることができます。scope.$eval次に、渡された関数を呼び出すために使用できます。

myApp.directive('myDirective', function ($document) {
    var definition = {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function () {

                ...

                button.on('click', function () {
                    scope.$apply(function () {
                        scope.$eval(attrs.onClick);
                        hover.remove();
                    })
                });
            });
        }
    }

    return definition;
})
于 2013-09-13T14:06:09.090 に答える
0

グローバル ディレクティブを許可する場合は、プライベート スコープを宣言しないでください。
少数のディレクティブのみを許可する場合は、スコープ宣言にリンクを追加します。

scope: {
            onClick: "&",
            ngShow : "&"
        },

コメントで質問するには：
ディレクティブでコントローラーを宣言し、このコントローラーでメソッドを宣言します。次に、ディレクティブ テンプレートで ng-click をこのメソッドに割り当てます。

var def = {
  restrict: 'A',
  controller: function($scope){
    $scope.callMe = function(){
      console.log('foo');
    }
  }
}

テンプレート内:

<div ng-click="callMe()">content</div>

このメソッドは、ディレクティブ内でのみアクセスできます。

于 2013-09-13T12:31:14.850 に答える