Boostrap 3:点击按钮不起作用

时间:2016-04-01 18:11:58

标签: javascript angularjs angularjs-ng-click ng-controller

我正在使用AngularJS和Twitter Bootstrap的Web应用程序。我的应用程序适用于Firefox,但使用Chrome或Chromium(我的操作系统是Ubuntu),当我点击按钮时,无法正确检测到此点击。检测到单击但对象事件为空或未检测到。如您所见,它只写evento:而不是id。在Firefox中,它正确地写evento:id

enter image description here

HTML:

<button id = "removeLeftTables" ng-click = "hmCtrl.changeView($event)">
    <span class="glyphicon glyphicon-remove " aria-hidden="true" style = "vertical-align: middle; font-size: 25px"></span>
</button>

JS:

self.changeView = function(event){
    console.log("evento: " + event.target.id);
    if (event.target.id == "removeLeftTables"){
        self.show_left_tables = false;
        self.style_left_content = "";
        self.style_right_content = "";
        self.style_tables_content = "";     
        self.cleanTabStyles();
    }

    if (event.target.id == "removeRightTables"){
        self.show_right_tables = false;
        self.style_right_content = "";
        self.style_left_content = "";
        self.style_tables_content = ""; 
        self.cleanTabStyles();
    }
}

我使用相同的代码检查错误并使其正常工作:https://plnkr.co/edit/vbBhVCrkpLyRl63Lwlur

我什么都不懂。为什么它在我的网络应用程序中不起作用,而在plunker工作正常?发生了什么事?

修改1 : 我的目标是获得对象的id我已经成了一个clic。使用Firefox,Chrome和Chromium。现在,事件的id只能由Firefox检索。使用Chrome和Chromium时,我无法从对象事件中检索到该事件。

编辑2: 我已经在我的代码中添加了一条跟踪,知道事件变量是否为null,当我在Chrome中点击时,Chromium事件变量不是null但是没有检测到id !!!

    $scope.changeView = function(event){
    if (event == null)
        console.log("event is NULL");
    else
        console.log("event IS NOT NULL");
    console.log("evento: " + event.target.id);
    if (event.target.id == "removeLeftTables"){
        self.show_left_tables = false;
        self.style_left_content = "";
        self.style_right_content = "";
        self.style_tables_content = "";     
        self.cleanTabStyles();
    }

    if (event.target.id == "removeRightTables"){
        self.show_right_tables = false;
        self.style_right_content = "";
        self.style_left_content = "";
        self.style_tables_content = ""; 
        self.cleanTabStyles();
    }
}

enter image description here

2 个答案:

答案 0 :(得分:1)

您可以currentTarget代替target。由于currentTarget获取其事件侦听器触发特定事件的元素

self.changeView = function(event) {
    console.log("evento: " + event.currentTarget.id);
};

它可能对你有帮助

答案 1 :(得分:0)

看看固定小提琴: https://plnkr.co/edit/QftJvAhSYmfq57zknWq8?p=preview

通常情况下,您应该在控制器中使用$scope.checkClick()而不是this.checkClick()

$scope.checkClic = function(obj) {
    console.log("obj: " + obj);
};

并且没有必要像h ctrl.methodName()那样调用方法。

你可以这样做:

<button ng-click = "checkClick('Button Clicked!!!')">

仅在services使用此功能。 即使在factories中,您也不应该使用this(使用return {a:..., b: function(){...}}语法。

在控制器或指令中,您应该使用$scope(或scope指令)将您的方法提供给html