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

@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.

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

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 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 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

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

Решение

Решение

Решение

@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