Sidr与angularjs按钮ng-click不起作用

Question

I'm using Sidr mobile menu with Angularjs. 我在Angularjs中使用Sidr移动菜单。 I'm putting a search bar inside the mobile nav and the button works fine. 我在移动导航中放了一个搜索栏，该按钮工作正常。 The problem is when I'm combining the it with Angularjs, somehow the ng-click didn't return any response. 问题是当我将其与Angularjs结合使用时，ng-click不会以任何方式返回任何响应。

I tried putting the button outside the mobile menu and it works fine. 我尝试将按钮放在移动菜单的外面，效果很好。

HTML: HTML：

<html data-ng-app="MyApp">
    <body data-ng-controller="mainController">
        <div id="mobile-menu">
            <a id="responsive-menu">
                <img src="img/icon_menu.png" alt="Mobile menu" />
            </a>
        </div>
        <div id="mobile-nav">
            <div class="input-group search-bar">
                <input type="text" class="form-control" placeholder="Search for..." data-ng-model="keyword">
                <span class="input-group-btn">
                    <button class="btn btn-search" type="button" data-ng-click="testClick()"><img src="img/icon_search.png" alt="Search" /></button>
                </span>
            </div>
        </div>
<script type="text/javascript">
$(document).ready(function(){
    $('#responsive-menu').sidr({
        name: 'sidr',
        source: '#mobile-nav',
        renaming: false
    });
    $(window).touchwipe({
        wipeLeft: function() {
          // Close
          $.sidr('close', 'sidr');
        },
        wipeRight: function() {
          // Open
          $.sidr('open', 'sidr');
        },
        preventDefaultEvents: false
   });
});
</script>
    </body>
</html>

JS JS

var app = angular.module('MyApp', ['ngRoute', 'slick', 'angularjs-dropdown-multiselect', 'infinite-scroll']);
app.controller('mainController', function ($scope){
    $scope.testClick = function() {
        console.log('click');
    }
})

I'm still new with AngularJS so maybe there's something wrong with how I call the function or how I structure the code. 我对AngularJS还是很陌生，所以也许我调用函数或构造代码的方式出了问题。 Any help is appreciated. 任何帮助表示赞赏。

Thank you very much 非常感谢你

Answer 1

Your controller is not importing $scope . 您的控制器未导入$scope 。

Try: 尝试：

.controller('mainController', function ($scope){

That being said, I'm an advocate of never using $scope , as it has many side effects, and breaking bad habits later is harder than training yourself good practices from the start. 话虽这么说，我是一个从不使用$scope的倡导者，因为它具有很多副作用，并且比从一开始就训练好习惯要难得多。 Angular has a syntax referred to by 'Controller as', which allows you to treat your controller as a standard JavaScript object. Angular的语法称为“控制器为”，可让您将控制器视为标准JavaScript对象。

.controller('mainController', function (){
var vm = this;
vm.testClick = function() {
    console.log('click');
}

in the HTML: 在HTML中：

<body data-ng-controller="mainController as vm">
....
<button class="btn btn-search" type="button" 
      data-ng-click="vm.testClick()">....

it is now very clear where this function resides, and you aren't reliant upon $scope as a "catch-all" for your variables. 现在很清楚此函数位于何处，并且您不必依赖$scope作为变量的“包罗万象”。

Sidr与angularjs按钮ng-click不起作用

问题描述

1 个解决方案

解决方案1
0 2015-02-07 02:55:24

Sidr与angularjs按钮ng-click不起作用

问题描述

1 个解决方案

解决方案1 0 2015-02-07 02:55:24

解决方案1
0 2015-02-07 02:55:24