2013-03-25 17 views
20

Myślę, że powinno być łatwo używać dobrze znanych atrybutów kątowych na dyrektywie po wyjęciu z pudełka.Atrybut ng-click na dyrektywie angularjs

Na przykład jeśli nazwa mojego dyrektywy jest myDirective chciałbym użyć go w ten sposób:

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

zamiast konieczności zdefiniować atrybut niestandardowy click (onClick), jak w poniższym przykładzie

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

Wygląda na to, że polecenie ng-click może działać, ale musisz też określić kontroler ng na etykiecie dyrektywy, którego nie chcę. Chcę zdefiniować kontroler na sąsiednich div

Czy można użyć ng-click na dyrektywie wraz z kontrolerem zdefiniowanym na macierzystym elemencie HTML?

Odpowiedz

33

Oto zaktualizowany kod. Może tego właśnie szukałeś.

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> 

kątowa:

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!'); 
    }; 
}]); 

Edit

Sprawdź rozwiązanie, które zrobiłem w jsFiddler jest to, czego szukałeś?

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

+0

To nie wydają się działać ... - nadal muszę dostarczyć NG-kontroler w moim dyrektywy –

+0

Więc chcesz funkcję „doSomthing()” nie będzie jednak w kontrolerze w twojej dyrektywie? – migontech

+0

chcę coś takiego: ''

w tej chwili można to osiągnąć tylko poprzez wiązanie do konkretnego atrybutu kliknij: 'app.directive ('myDirective', function() {return { zakres: { onClick: '&' } }; }); ' ' ' –

Powiązane problemy