web-dev-qa-db-ja.com

angularjsディレクティブのng-click属性

すぐに使えるディレクティブで、よく知られているangular属性を使用するのは簡単だと思います。

たとえば、ディレクティブの名前がmyDirectiveである場合、次のように使用します。

<div ng-controller="myController">
   <my-directive ng-click="doSomething()"><my-directive>
</div>

以下の例のようにカスタムクリック属性（onClick）を定義する必要はありません

<div ng-controller="myController">
   <my-directive on-click="doSomething()"><my-directive>
</div>

Ng-clickは機能するように見えますが、指示タグにもng-controllerを指定する必要がありますが、これは望ましくありません。周囲のdivでコントローラーを定義したい

親のhtml要素で定義されたコントローラーと一緒にディレクティブでng-clickを使用することは可能ですか？

angularjsangularjs-directive
20
Glenn Dejaeger

ここに更新されたコードがあります。たぶんこれはあなたが探していたものです。

HTML：

<div data-ng-app="myApp">
    <div data-ng-controller="MyController">
        <my-directive data-ng-click="myFirstFunction('Hallo')"></my-directive>
        <my-directive data-ng-click="mySecondFunction('Hi')"></my-directive>
    </div>
</div>

角度：

var app = angular.module('myApp', []);

app.directive('myDirective', function(){
    return {
        restrict: 'EA',
        replace: true,
        scope: {
            eventHandler: '&ngClick'
        },
        template: '<div id="holder"><button data-ng-click="eventHandler()">Call own function</button></div>'
    };
});

app.controller('MyController', ['$scope', function($scope) {
    $scope.myFirstFunction = function(msg) {
         alert(msg + '!!! first function call!');   
    };
    $scope.mySecondFunction = function(msg) {
         alert(msg + '!!! second function call!');   
    };
}]);

編集

私がjsFiddlerで作った解決策をチェックして、あなたが探していたものですか？

http://jsfiddle.net/migontech/3QRDt/1/

33
migontech