0

我正在使用带有 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 的新手，所以我调用函数的方式或构建代码的方式可能有问题。任何帮助表示赞赏。

非常感谢

4

1 回答 1

0

您的控制器未导入$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变量的“包罗万象”。

于 2015-02-07T02:55:24.937 回答