Мне нужно вставить код jquery в угловой компонент, этот jquery был в html, поэтому не очень хорошая практика.
Я попытался создать там новую функцию и вставить свой jquery-код, jquery работает очень хорошо, но я не знаю, почему, функциональная ссылка теперь сломана и не работает.
Я новичок в использовании угловых и js, поэтому я не могу понять, может кто-то поможет решить эту проблему? объясните, что не так в коде, и я нарушил функцию выше
Спасибо.
Код jquery Я попытался применить
$('#close, #menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
угловой файл:
angular.module('test').directive('leftBar', [
'leftBarService',
function leftBar(leftBarService) {
'use strict';
var
scope = {
onLeafNode: '='
};
function link($scope, $element) {
$element.leftBar({
speed: 1000,
useDynamicLoading: false,
onLeafNodeReched: $scope.onLeafNode
});
}
function menu ($scope, $element){
$('#close, #menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
}
return {
restrict: 'A',
scope: scope,
link: link,
link:menu,
templateUrl: 'app/test/leftBar/leftBar.html'
};
}
]);
В возвращаемом объекте директивы вы используете два свойства link
. Вам нужно поместить код jQuery, который вы указали внутри уже указанной функции связи, и использовать только одно свойство link
в возвращаемом объекте.
angular.module('test').directive('leftBar', [
'leftBarService',
function leftBar(leftBarService) {
'use strict';
var
scope = {
onLeafNode: '='
};
function link($scope, $element) {
$element.leftBar({
speed: 1000,
useDynamicLoading: false,
onLeafNodeReched: $scope.onLeafNode
});
menu();
}
function menu() {
$('#close, #menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
}
return {
restrict: 'A',
scope: scope,
link: link,
templateUrl: 'app/test/leftBar/leftBar.html'
};
}
]);
Когда вы начинаете с углового, всегда лучше оставить свои хорошие практики в JQuery, потому что все это становится плохой практикой в угловом режиме, и лучше использовать угловую директиву (кто-то написал то, что вы хотите уже), чем использовать JQuery в пределах директивы. Для того, что вы пытаетесь сделать, вы можете ссылаться на директиву сворачивания в https://angular-ui.github.io/bootstrap/.