Question

每当我点击HTML页面abc.html中的菜单按钮时，我都会尝试调用用demo.js编写的AngularJS函数。但它不会进入demo.js。

以下是代码片段：

****code from abc.html***********
<div id="all" ng-class="{hide:showmenu,slide:!showmenu}">
    <div class="overlay" ng-class="{show:showmenu}" ng-swipe-left="showmenu=false"></div>
        <div id="header">
            <button ng-click="toggleMenu()"></button>
            <h1>Demo</h1>
         </div>

和

demo.js***************************

var app = angular.module('myApp', ['ngRoute','ngTouch']);
    app.directive('mySlideController', ['$swipe',
        function($swipe) {
            return {
            restrict: 'EA',
            link: function(scope, ele, attrs, ctrl) {
            var startX, pointX;
            $swipe.bind(ele, {
            'start': function(coords) {
            startX = coords.x;
            pointX = coords.y;
        },
        'move': function(coords) {
         var delta = coords.x - pointX;
        // ...
    },
    'end': function(coords) {
    // ...
    },
    'cancel': function(coords) {
    // ...
}
});
}
}
}]);

app.controller("AppController", function($scope){
     $scope.showmenu=false;
     $scope.toggleMenu = function(){
         $scope.showmenu=($scope.showmenu) ? false : true;
     }
});

Answer 1

代码工作正常，所以问题是你没有显示所有这些。缺少控制器？缺少ng-app？可能缺少依赖项？我们怎么知道什么时候你不能打扰我们呢？我们不介意读者。

工作插件： http://plnkr.co/edit/D3JADNfAOzvvkw8yRMk0?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script src="https://code.angularjs.org/1.3.16/angular.js"></script>
    <script data-require="ngRoute@*" data-semver="1.3.15" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script data-require="angular-touch@1.3.16" data-semver="1.3.16" src="https://code.angularjs.org/1.3.16/angular-touch.js"></script>
  </head>

  <body ng-app="myApp">
    <div ng-controller="AppController" id="all" ng-class="{hide:showmenu,slide:!showmenu}">
      <div class="overlay" ng-class="{show:showmenu}" ng-swipe-left="showmenu=false"></div>
      <div id="header">
        <button ng-click="toggleMenu()">text</button>
        <h1>Demo</h1>
        <p>{{showmenu}}</p>
      </div>
    </div>
    <script>
      var app = angular.module('myApp', ['ngRoute', 'ngTouch']);
      app.directive('mySlideController', ['$swipe',
        function($swipe) {
          return {
            restrict: 'EA',
            link: function(scope, ele, attrs, ctrl) {
              var startX, pointX;
              $swipe.bind(ele, {
                'start': function(coords) {
                  startX = coords.x;
                  pointX = coords.y;
                },
                'move': function(coords) {
                  var delta = coords.x - pointX;
                  // ...
                },
                'end': function(coords) {
                  // ...
                },
                'cancel': function(coords) {
                  // ...
                }
              });
            }
          }
        }
      ]);

      app.controller("AppController", function($scope) {
        $scope.showmenu = false;
        $scope.toggleMenu = function() {
          console.log('showmenu', $scope.showmenu);
          $scope.showmenu = ($scope.showmenu) ? false : true;
        }
      });
    </script>
  </body>

</html>

无法调用AngularJS函数？

1 个答案: