2015-03-11 13 views
8

Mam bibliotekę javascript z wieloma przydatnymi funkcjami, z których korzystam na mojej stronie internetowej, która robi różne rzeczy.wywołanie funkcji javascript poza zakresem ng-click

Wiem, że nie mogę uzyskać dostępu do tych funkcji z ng-click, ponieważ funkcje są poza zakresem.

Czy istnieje sposób dostępu do nich bez konieczności zadeklarowania funkcji zasięgu, która po prostu wykonuje połączenie z funkcją w bibliotece?

to jsfiddle z przykładem. Chciałbym wiedzieć, czy istnieje sposób na to, aby drugi link działał. Jest tak dlatego, że nie podoba mi się pomysł zdefiniowania funkcji, która po prostu wywoła inną funkcję. na przykład

HTML:

<div ng-click="doSomething()">Click Me (Working)</div> 
<div ng-click="doSomethingElse()">Click Me (Not Working)</div> 

Controller JS:

$scope.doSomething = function() { 
    doSomethingElse(); 
}; 

Zewnętrzna biblioteka JS:

function doSomethingElse() { 
    alert("SomethingElse"); 
} 

< ------- ------ UPDATE ->

Dzięki za kreatywne odpowiedzi facetów! Odpowiedź Vinaya K jest najłatwiejsza i najbardziej oczywista, ale zdecydowałem się pójść z odpowiedzią Rona E. Powodem jest to, że mam już globalny moduł z kolekcją dyrektyw wielokrotnego użytku, co ułatwiłoby i ułatwiłoby implementację w moim kodzie HTML. Również dlatego, że czasami używać więcej niż jednej funkcji z biblioteki, a następnie będzie musiał łańcucha je w onclick:

onlick="func1(); func2(); func3();" 

Gdzie dyrektywy jest po prostu czystsze i mogę zadzwonić, jak wiele funkcji, jak lubię robiąc inne rzeczy także.

+0

Nie, nie można nazwać nieprzestrzegania $ zakres funkcji z widoku, możesz zrobić '$ scope.doSomething = doSomethingElse;' – tymeJV

Odpowiedz

7

Można użyć dyrektywy, oto przykład:

// in your JS source 
angular.directive('something', [function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.bind('click', function() { 
       alert('yup'); 
      }); 
     } 
    }; 
}]); 

// in your HTML file 
<button type="button" something>Click Me!</button> 

To pozwala na ponowne użycie różnych fragmentów kodu/funkcji w obrębie całego projektu dość łatwo.

15

Wyrażenie (lub inne wyrażenie w kanciastym) zostanie ocenione w kontekście zakresu.

Ponieważ doSomethingElse nie jest zdefiniowany w zakresie, nie będzie działać.

Zastosowanie onclick zamiast ng-click

<div ng-click="doSomething()">Click Me</div> 
<div onclick="doSomethingElse()">Click Me </div> 
+1

Doh! Taka łatwa łatka. To oczywiście czas iść spać: P – WJK

+0

Mam ten sam problem używając klasy ng, chociaż używam go w tabeli razem z ng-repeat, czy w jakiś sposób można użyć standardowej klasy razem z ng-repeat? – RandomDisplayName

0

Jeśli biblioteka jest dostępna globalnie (na przykład od obiektu window) można napisać metodę w swojej rootScope który akceptuje nazwę funkcji jako parametr. Gwarantujemy, że nie jest to najbardziej ortodoksyjny sposób robienia rzeczy w Angular, ale wyeliminuje to konieczność dodawania tych wszystkich dodatkowych metod do wszystkich waszych zakresów. Oto przybliżony przykład:

W Twojej aplikacji.metoda run można dodać coś takiego:

$rootScope.callWindowMethod = function(methodName, parameter) { 
    if(typeof window[methodName] !== 'function') { 
    console.log('could not find ', methodName, ' function'); 
    return; 
    } 
    return window[methodName](parameter); 
}; 

Następnie w widoku można zrobić coś takiego:

<button ng-click="$root.callWindowMethod('alert','Hey there!')">Click Me</button> 

można dostać nawet hodowcy i przejść w dowolnej liczby parametrów do funkcji jak również nazwa funkcji zawiera kropki dla metod, które są zagnieżdżone w innych obiektach i podzielić je. To powinno przynajmniej zacząć.

3

cześć jeśli zdefiniowano funkcję javascript można używać starych js funkcje i kątowe js razem

Przykład:

<div ng-click="doSomething()" class="myBtn"=>Click Me (Working)</div> 
//JQuery Lib must be included your project 
$(document).on('click','.btn',function(){ 
    eval($(this).attr('ng-click')); 
}); 
function doSomething(){ 
//Bla Blo Blu Bli 
} 

podziękować za czytanie

+0

Podoba mi się ta ewaluacja. Podniosłem kciuk. Zastanawiam się, czy ng-click odnosi się do funkcji w zakresie, co powinienem zrobić. – Estevez

Powiązane problemy