Angularjs Click обработка событий внутри ссылки

Question

Angularjs Click обработка событий внутри ссылки

0

Я пытаюсь создать пользовательскую директиву, которая будет отображать разные кнопки на основе атрибута. Одна из кнопок требует обработчика события click, и я хочу обработать его в директиве, так как на этой странице будет несколько экземпляров этой директивы. Я попробовал код ниже, но безрезультатно.

'use strict';
angular
    .module('test-template', [])
    .directive('testTemplateBricks', [
    '$compile',
    '$timeout',
        function($compile,$timeout) {
            return {
               restrict: 'A', 
                link: function($scope, iElm, iAttrs, controller) {
                    var el = "";
                    if(iAttrs.needImg=="true")
                    {
                        el += '<input type="file" style="display:none;" class="browse-file"/><button class="btn btn-info" ><span class="glyphicon glyphicon-picture" ng-click="browse()"></span></button>';
                    }
                    if(iAttrs.needTxt=="true")
                    {
                        el += ' <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span></button>';
                    }

                    $compile(el)($scope);
                    iElm.append(el);

                    $scope.browse = function() { console.log("browsing");};

                    $timeout(function(){
                        iElm.on("click",function(e){
                            console.log("Browsing");
                            iElm.find("input[type=file]").click();
                        });
                    });
                }
            };
        }
    ]);

EDIT: http://plnkr.co/edit/bNRLvWjEE7LLvhwRFIae?p=preview

В этом примере я хочу отобразить скрытый браузер файлов при нажатии кнопки изображения.

Amit Pakhira 06 нояб. 2015, в 13:20

Источник

0

Есть ли у вас ошибки на консоли? Из моей проверки кажется, что вход не найден и метод click не определен.
Dvir 06 нояб. 2015, в 12:14
0

Было бы здорово, если бы вы могли предоставить рабочую плнкр.
Bose_geek 06 нояб. 2015, в 12:15
0

@Dvir Нет ошибок, но $ scope.browse вообще не запускается с таймаутом, когда я получаю console.log, однако каждый клик регистрирует около 100 журналов, а вторая строка с типом ввода, похоже, не работает. Поэтому я думаю, что вы правы, что элемент ввода отсутствует, но он отображается на странице. Какие-либо решения?
Amit Pakhira 06 нояб. 2015, в 12:33
0

Ха-ха, бесконечный цикл связан с тем, что вы компилируете элемент, у которого уже есть директива. Он отображает директиву каждый раз, когда вызывается функция компиляции.
Dvir 06 нояб. 2015, в 12:39
0

Попробуйте опубликовать код на jsFiddle или еще что-нибудь, чтобы мы могли вам помочь. Это немного грязно и трата времени на это самостоятельно, если вы хотите быстрый ответ :)
Dvir 06 нояб. 2015, в 12:40
0

вы неправильно определяли свой модуль, исправили его сейчас
a darren 06 нояб. 2015, в 12:41
0

@adarren Определение модуля было правильным, поскольку оно основано на пакете angularjs-cordova, где модуль первоначально зарегистрирован через другой файл.
Amit Pakhira 06 нояб. 2015, в 12:52
0

@AmitPakhira ну ладно, имеет смысл, это полезно для людей, чтобы ответить на ваши вопросы с рабочим фрагментом, хотя :) Я надеюсь, что вы можете опираться на мой ответ ниже
a darren 06 нояб. 2015, в 12:57

Показать ещё 6 комментариев

Теги:

angularjs

angularjs-directive

1 ответ

Ещё вопросы

Есть ли у вас ошибки на консоли? Из моей проверки кажется, что вход не найден и метод click не определен.
Было бы здорово, если бы вы могли предоставить рабочую плнкр.
@Dvir Нет ошибок, но $ scope.browse вообще не запускается с таймаутом, когда я получаю console.log, однако каждый клик регистрирует около 100 журналов, а вторая строка с типом ввода, похоже, не работает. Поэтому я думаю, что вы правы, что элемент ввода отсутствует, но он отображается на странице. Какие-либо решения?
Ха-ха, бесконечный цикл связан с тем, что вы компилируете элемент, у которого уже есть директива. Он отображает директиву каждый раз, когда вызывается функция компиляции.
Попробуйте опубликовать код на jsFiddle или еще что-нибудь, чтобы мы могли вам помочь. Это немного грязно и трата времени на это самостоятельно, если вы хотите быстрый ответ :)
вы неправильно определяли свой модуль, исправили его сейчас
@adarren Определение модуля было правильным, поскольку оно основано на пакете angularjs-cordova, где модуль первоначально зарегистрирован через другой файл.
@AmitPakhira ну ладно, имеет смысл, это полезно для людей, чтобы ответить на ваши вопросы с рабочим фрагментом, хотя :) Я надеюсь, что вы можете опираться на мой ответ ниже

a darren · Answer 1 · 2015-11-06T11-34-00.000Z

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

Но чтобы вы начали, я взял ваш код и немного изменил его (https://jsbin.com/negawu)

angular
    .module('test-template', [])
    .directive('testTemplateBricks', [
    '$compile',
    '$timeout',
        function($compile,$timeout) {
            return {
               restrict: 'A',
               template: '<input type="file" class="browse-file"/>' + 
                         '<button class="btn btn-info" ng-show="showImage">' + 
                           '<span class="glyphicon glyphicon-picture" ng-click="browse()"></span>' + 
                         '</button>' + 
                         '<button class="btn btn-info" ng-show="showText">' + 
                           '<span class="glyphicon glyphicon-pencil"></span>' + 
                         '</button>',
                link: function($scope, iElm, iAttrs, controller) {

                    $scope.showImage = false;
                    $scope.showText = false;

                    if (iAttrs.needImg == "true") {
                        $scope.showImage = true;
                    }

                    if (iAttrs.needTxt == "true") {
                        $scope.showText = true;
                    }

                    $scope.browse = function() {      
                      console.log("browsing");
                    };
                }
            };
        }
    ]);