ng-click什么都不做,DOM注意到了一个点击

时间:2015-04-21 11:08:36

标签: javascript angularjs

尝试设置简单的ng-click事件,并阅读有关它的其他页面。似乎只要将它添加到$ scope它应该可以工作,但是我在下面的页面中放置的两个示例没有任何作用(除了preventDefault())。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>ng-click test</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="js/DBFScube.js"></script>
</head>
<body ng-app="DBFScube" ng-controller="AppCtrl as app">
<div style="width: 100%;">
    <div id="zoom-controll"><li class="full"><a href="#" ng-click="$event.preventDefault(); $scope.growpane('I am a little thing that needs to do somethign');">Full-screen</a></li></div>
    <button ng-click="$scope.alert('I am a little thing that needs to do somethign');">Click Me</button>
</div>


</body>
</html> 

和控制器

var DBFScube = angular.module("DBFScube", ['ngSanitize']);

DBFScube.controller("AppCtrl", function ($sce, $scope, $http, $filter){
    var app = this;
    //
    //$http.get("http://localhost:3000").success(function(CubeSides){
      //  app.CubeSides = CubeSides;
    //})
    $http.get("http://localhost:3000").success(function(CubeSides){
        $scope.sides=CubeSides;
        console.log("Loading data");
    })
    app.getmenuname = function(side) {
        if($scope.sides === undefined) {
            console.log("Not loaded fside " + side );
        } else {
            console.log("Got menu pane " + $scope.sides);
            var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0];
            console.log("Sending: " + fside.menuname);
            return fside.menuname;
        }
    }
    $scope.alert = function(message) { alert(message); }
    $scope.growpane = function (side) {
        console.log("You pressed the button, like " + side);
    }
    app.showpane = function (side) {
        console.log("Loading side: " + side);
        if($scope.sides === undefined) {
            console.log("Not loaded yet");
        } else {
            console.log("Got page " + $scope.sides);
            var fside = $filter('filter')($scope.sides, function (d) {return d.side === side;})[0];
            var culine = '<iframe src="' + fside.surl + '" height="700" width="700"></iframe>';
            console.log(culine);
            return $sce.trustAsHtml(culine);
        }
    }

})

3 个答案:

答案 0 :(得分:3)

问题是你不应该在视图中写$scope。这适用于您需要的所有控制器,您永远不需要编写$ scope,因为您在定义的控制器的范围内。

您的问题在这里:

 <button ng-click="$scope.alert('I am a little thing that needs to do somethign');">Click Me</button>

更改为:

 <button ng-click="alert('I am a little thing that needs to do somethign');">Click Me</button>

答案 1 :(得分:2)

$ scope范围内没有必要 - &#39; ng - &#39;属性。试试

<button ng-click="alert('I am a little thing that needs to do somethign');">Click Me</button>

答案 2 :(得分:0)

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>ng-click test</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="js/DBFScube.js"></script
  <script>
    module.angular("DBFScube").controller("AppCtrl",['$scope', function($scope){
    $scope.someFun = function(){
      alert('I am a little thing that needs to do somethign');
    }
    }]);
  </script>
</head>
<body ng-app="DBFScube" ng-controller="AppCtrl">
  <div style="width: 100%;">
  <div id="zoom-controll"><li class="full"><a href="#" ng-click="$event.preventDefault(); $scope.growpane('I am a little thing that needs to do somethign');">Full-screen</a></li></div>
  <button ng-click="someFun()">Click Me</button>
  </div>    
</body>
</html>