Porównaj ceny domen i usług IT, sprzedawców z całego świata

Dyrektywa AngularJs: wywołanie metody z zakresu nadrzędnego w szablonie


Jestem całkiem nowy w dyrektywach Angulara i bardzo trudno mi to zrobić, aby robić to, co chcę. Oto podstawy tego, co mam:
Kontroler:
controller('profileCtrl', function($scope) {
$scope.editing = {
'section1': false,
'section2': false
}
$scope.updateProfile = function() {};
$scope.cancelProfile = function() {};
});

Dyrektywa:
directive('editButton', function() {
return {
restrict: 'E',
templateUrl: 'editbutton.tpl.html',
scope: {
editModel: '=ngEdit'
}
};
});

Szablon (editbutton.tpl.html):
<button
ng-show="!editModel"
ng-click="editModel=true"></button>
<button
ng-show="editModel"
ng-click="updateProfile(); editModel=false"></button>
<button
ng-show="editModel"
ng-click="cancelProfile(); editModel=false"></button>

HTML:
<edit-button ng-edit="editing.section1"></edit-button>

Jeśli nie jest to jasne, chcę, aby tag
& < edit-button & >
zawierał trzy różne przyciski, z których każdy współdziała z dowolną właściwością zakresu przekazaną do
ng-edit . Po kliknięciu powinni zmienić tę właściwość, a następnie wywołać odpowiednią metodę zakresu. 
Jak to się dzieje teraz, kliknięcia przycisków zmieniają poprawnie wartości
$ scope.editing
, ale metody
updateProfile
i
cancelProfile
nie działają. Być może daleko mi do zrozumienia, jak prawidłowo używać dyrektyw, ale trudno mi znaleźć w Internecie przykład, który pomógłby mi osiągnąć to, co próbuję zrobić. Każda pomoc byłaby bardzo mile widziana.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Jednym ze sposobów byłoby wywołanie funkcji za pomocą
$ parent
.
<button ng-show="editModel" ng-click="$parent.cancelProfile(); editModel=false">b3</button>

Demonstracja
http://plnkr.co/edit/6hlINYjhNzcTSJoWbsDi
Innym sposobem (i prawdopodobnie najlepszym) jest ustawienie zakresu dyrektywy w trybie piaskownicy, tak aby zawierała odniesienia do tych funkcji kontrolera:
app.directive('editButton', function() {
return {
restrict: 'E',
templateUrl: 'editbutton.tpl.html',
scope: {
editModel: '=ngEdit',
updateProfile: '&',
cancelProfile: '&'
}
};
});

Następnie przekazujesz funkcje przez HTML:
<edit-button ng-edit="editing.section1" update-profile='updateProfile()' cancel-profile='cancelProfile()'></edit-button>

Demonstracja
http://plnkr.co/edit/HLqRPIzAz ... eview

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się