Question

我正在使用带Angularjs的Sidr移动菜单。我在移动导航栏中放置了一个搜索栏，按钮工作正常。问题是当我将它与Angularjs结合使用时，ng-click不会返回任何响应。

我尝试将按钮放在移动菜单之外，它运行正常。

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

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

我还是AngularJS的新手，所以我可能在调用函数或如何构造代码时出现问题。任何帮助表示赞赏。

非常感谢

Answer 1

您的控制器未导入$scope。

尝试：

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

话虽这么说，我是一个从不使用$scope的倡导者，因为它有许多副作用，并且以后打破坏习惯比从一开始就训练自己的好习惯更难。 Angular有一个'Controller as'引用的语法，它允许您将控制器视为标准JavaScript对象。

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

HTML中的

：

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

现在很清楚这个函数所在的位置，并且你并不依赖于$scope作为变量的“全能”。

Sidr with angularjs button ng-click不工作

1 个答案: