Функцию переделать в директиву

@Enough1987 · Регистрация: 11.10.2014

Студворк — интернет-сервис помощи студентам

Есть функция которая срабатывает по клику -

JavaScript
1
2
3
4
    $scope.changePage = function(page){
        page = 'views/'+page;
          $scope.page = page;
    };

Хочу что бы было это дело директивой, -

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.directive('goToNewPage', function(){
    return {
           link: function (scope, element, attributes) {
                   var page = attributes['goToNewPage'];
                       page = "views/"+page;
                   element.on("click", function (e) {
                        scope.page = page; 
                        console.log( scope.page );                                             
                    });
                   
 
           },
           restrict: "A",
                    // øàáëîí äëÿ ñîçäàíèÿ ðàçìåòêè
   }

;
});

Но не пашет ((

@awMinor · 02.03.2016, 14:23

В дерективе код нужно просто навесить на element.event и тогда в дерективе будет обрабатыватся евент на этом элементе где она навешена

@Enough1987 · 02.03.2016, 21:26 **[ТС]**

я вроде так и делаю -

JavaScript
1
element.on("click", function (e) {

@awMinor · 02.03.2016, 21:30

А, извиняюсь, не заметил. Если я правильно помню, то вся проблема в restrict, вам следует использовать AC значение

@newyork7776 · 02.03.2016, 22:24

какая версия ангуляра?

@Enough1987 · 02.03.2016, 22:54 **[ТС]**

какая версия ангуляра?

1.6 кажись

Добавлено через 1 минуту

Сообщение от awMinor

А, извиняюсь, не заметил. Если я правильно помню, то вся проблема в restrict, вам следует использовать AC значение

restrict говорит про то как использовать директиву, я использую как атрибут, то-есть А

@LeniumSoft · 03.03.2016, 16:49

Сообщение от Enough1987

Но не пашет ((

А что именно не пашет? Код вроде валидный. Дебаггер проходит по коду?
Может стоит добавить:

JavaScript
1
2
3
4
5
element.on("click", function (e) {
                        scope.page = page; 
                        scope.$$phase || scope.$apply();
                        console.log( scope.page );                                             
                    });

Добавлено через 8 минут

Сообщение от Enough1987

Но не пашет ((

А как она в html повешена?
Должна быть:

HTML5
1
<div go-to-new-page="page2"><!div>

А вот как она будет в:

JavaScript
1
attributes['goToNewPage'];

сходу не могу сказать! Вероятно под своим нормальным именем goToNewPage

@Enough1987 · 03.03.2016, 22:21 **[ТС]**

[

Сообщение от LeniumSoft

А что именно не пашет? Код вроде валидный. Дебаггер проходит по коду?
Может стоит добавить:

В консоль попадает нужные данные.

JavaScript
1
console.log( scope.page );

Но не переходит на нужную страницу, у меня же

JavaScript
1
$scope.page

это переменная которая включена в инклюд.

HTML5
1
2
        <div id='page' ng-include="page">
        </div> <!-- end #page -->

когда функцией в контроллере, то меняет, а дериктивой не хочет.

в HTML как нужно -

HTML5
1
<div go-to-new-page="page2"><!div>

в дж тоже-
attributes['goToNewPage'];

Ломаю голову не пойму как переделать с функции в дерективу ((

@LeniumSoft · 03.03.2016, 22:39

Сообщение от Enough1987

Ломаю голову не пойму как переделать с функции в дерективу

И это тоже не помогает?

JavaScript
1
scope.$$phase || scope.$apply();

А если попробовать прям в лоб:

JavaScript
1
2
3
4
element.on("click", function (e) {
                        scope.changePage(attributes['goToNewPage']);
                        console.log( scope.page );                                             
                    });

@Enough1987 · 03.03.2016, 22:52 **[ТС]**

Сообщение от LeniumSoft

И это тоже не помогает?
JavascriptВыделить код
1
scope.$$phase || scope.$apply();

- NТак пробовал не помогло((

Сообщение от LeniumSoft

А если попробовать прям в лоб:
JavascriptВыделить код
1
2
3
4
element.on("click", function (e) {
* * * * * * * * * * * * scope.changePage(attributes['goToNewPage']);
* * * * * * * * * * * * console.log( scope.page ); * * * * * * * * * * * * * * * * * * * * * *
* * * * * * * * * * });

))) Оригинальное решение, подняли настроение )) Так конечно работает )) Но смысла в этом как мне кажется мало ))

@LeniumSoft · 04.03.2016, 10:47

Сообщение от Enough1987

Оригинальное решение, подняли настроение

Это чисто для тестирования!

Сообщение от Enough1987

Так пробовал не помогло

Набросал пример! Похоже я смог воссоздать ваш случай!
https://plnkr.co/edit/OskMildx... ?p=preview

У вас видимо элементы с директивами тоже создаются в ng-repeat.

@Enough1987 · 04.03.2016, 22:51 **[ТС]**

вы гений ))

Да проблема была со скоупами. Только не угадали, я вызывал директиву в элементе который находился в заинклюженом куске html ))) Но проблема определена верно )))

Добавлено через 9 минут
Там еще жестче оказалось, в одном случае один уровень вложенности )) А в другом два ))

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.directive('goToNewPage', function(){
    return {
           link: function (scope, element, attributes) {
                   var page = attributes['goToNewPage'];
                       page = "views/"+page,
                 parent = scope.$parent;
                 parentOfParent = parent.$parent;
                   element.on("click", function (e) {
                        scope.page = page;  
                        parent.page = page; 
                        parentOfParent.page = page;                    
                        scope.$$phase || scope.$apply();
                        parent.$$phase || parent.$apply();
                        parentOfParent.$$phase || parentOfParent.$apply();
                        console.log( page );                                             
                    });
                   
 
           },
           restrict: "AC",
   };   
})

@LeniumSoft · 04.03.2016, 23:06

Сообщение от Enough1987

Там еще жестче оказалось, в одном случае один уровень вложенности )) А в другом два ))

Тогда может лучше так сделать: https://plnkr.co/edit/We56AvKfHZw5ZLNxfwd0?p=info

подписать так: ng-include="$root.page"
и в директиве устанавливать для глобального скоупа: $rootScope.page = page;

код будет поприятней глазу

Добавлено через 1 минуту
И на вложенность этой конструкции пофиг))))))

@Enough1987 · 04.03.2016, 23:28 **[ТС]**

Вы меня опережаете на два шага ))

Я собственно уже и начал переделывать, но подумал про броаткасты -

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.directive('goToNewPage', function($rootScope){
    return {
           link: function (scope, element, attributes) {
                 var page = "views/"+attributes['goToNewPage'];
                 element.on("click", function (e) {
                    $rootScope.$broadcast( "pageCast", page );
                    scope.$on("pageCast", function (event, args) {
                      scope['page'] = args;
                      console.log( args )
                    });
                 });
                   
 
           },
           restrict: "AC",
   };   
})

Пока, гальп матерится при компиляции, ошибку выдает.
Подумаю еще над вариантом с броаткастами, если не выйдет в рут засуну. Загрязнять рут как то не сильно хочется, хоть это и лучше за то что я наделал ))

@LeniumSoft · 04.03.2016, 23:47

Сообщение от Enough1987

Подумаю еще над вариантом с броаткастами

Не стоит подписывать на событие прямо внутри клика:

JavaScript
1
scope.$on("pageCast", function (event, args)

Обработчиков эвента может стать слишком много и начнёт тормозить

Добавлено через 9 минут

Сообщение от Enough1987

Пока, гальп матерится при компиляции, ошибку выдает.

Минификацию проводите?
Тогда нужно определять директиву не так!

Надо её в массив завернуть:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.directive('goToNewPage',["$rootScope",  function($rootScope){
    return {
           link: function (scope, element, attributes) {
                 var page = "views/"+attributes['goToNewPage'];
                 element.on("click", function (e) {
                    $rootScope.$broadcast( "pageCast", page );
                    scope.$on("pageCast", function (event, args) {
                      scope['page'] = args;
                      console.log( args )
                    });
                 });
                   
 
           },
           restrict: "AC",
   };   
}])

@Enough1987 · 05.03.2016, 00:22 **[ТС]**

Сообщение от LeniumSoft

Не стоит подписывать на событие прямо внутри клика: scope.$on("pageCast", function (event, args)
Обработчиков эвента может стать слишком много и начнёт тормозить

Да, вы как всегда правы.
С броаткастами идея не пошла ))

Взял вашу идею рут скоупом за основу, работает и коротко, а что глобальный скоуп засорил, то уж как то с одной переменной в руте переживу.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.directive('goToNewPage', function($rootScope){
    return {
           link: function (scope, element, attributes) {
                 var page = "views/"+attributes['goToNewPage'];
                 element.on("click", function (e) {
                    $rootScope.page = page;
                    $rootScope.$$phase || $rootScope.$apply();
                    console.log( page );                   
                 });                 
                   
 
           },
           restrict: "A",
   };   
})

Добавлено через 1 минуту

Сообщение от LeniumSoft

Минификацию проводите?
Тогда нужно определять директиву не так!
Надо её в массив завернуть:

А зачем в массив заворачивать? Пока плагин минимизации закомментирован ))
Возникают проблемы?

Добавлено через 15 минут
Да, снял коментарий с минификатора

JavaScript
1
    .pipe(uglify())

Все перестало работать )) Таки да ))

@LeniumSoft · 05.03.2016, 00:35

Сообщение от Enough1987

Все перестало работать )) Таки да ))

Вот это:

JavaScript
1
.directive('goToNewPage', function($rootScope){

минификатор превратит в:

JavaScript
1
.directive('goToNewPage', function(a){

и ангуляр не может это инжектировать.

А строчку минификатор почикать не может.
Соответственно это:

JavaScript
1
.directive('goToNewPage',["$rootScope",  function($rootScope){

будет таким:

JavaScript
1
.directive('goToNewPage',["$rootScope",  function(a){

А в самом ангуляре предусмотрен такой вариант. Если массив, то запихивать все строчки массива в функцию, которая идёт последним элементом массива.

Добавлено через 1 минуту
и "а" в функции будет инжектированно как "$rootScope"

@Enough1987 · 05.03.2016, 01:05 **[ТС]**

Спасибо за ответ, да обратил на это внимание

Но, эту проблему решил чуть по другому -

JavaScript
1
    .pipe( uglify({mangle: false}) )

https://www.npmjs.com/package/gulp-uglify
Options
mangle - Pass false to skip mangling names.

Просто установил опцию в плагине, что бы оно скипнуло переделку имен ))

Новые блоги и статьи Все статьи Все блоги /
сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и источниками (напряжения, ЭДС и тока). Найти токи и напряжения во всех элементах. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и. . .

Функцию переделать в директиву

Решение

Решение

Решение

@awMinor 8 / 6 / 2 Регистрация: 12.08.2012 Сообщений: 40
	02.03.2016, 14:23
	В дерективе код нужно просто навесить на element.event и тогда в дерективе будет обрабатыватся евент на этом элементе где она навешена 0

@awMinor 8 / 6 / 2 Регистрация: 12.08.2012 Сообщений: 40
	02.03.2016, 21:30
	А, извиняюсь, не заметил. Если я правильно помню, то вся проблема в restrict, вам следует использовать AC значение 0

@newyork7776 351 / 344 / 279 Регистрация: 21.05.2013 Сообщений: 1,312
	02.03.2016, 22:24
	какая версия ангуляра? 0