2016-12-03 16 views
0

小さな問題と私はおそらく本当にダムですが、私はサーバーに連絡する必要がありますWebページの2つのボタンがあります。しかし、最初のものだけが押されたときにHTTPリクエストを送信します。第2の角ボタンは機能を呼び出さない

<html> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
<script> 
    var app = angular.module('buttonApp', []); 
    app.controller('myCtrl', function($scope, $http) { 
     $scope.myFunc = function(url) { 
      console.log("func called"); 
      $http({ 
       method: 'POST', 
       url: url, 
      }).then(function successCallback(response) { 
       console.log(response); 
      }, function errorCallback(response) { 
       console.log("Failed connection"); 
      }); 
     } 
    }); 
</script> 
<body> 
<div ng-app="buttonApp" ng-controller="myCtrl"> 
    <button ng-click="myFunc('/buttonPressed1')">b1</button> 
</div> 

<div ng-app="buttonApp" ng-controller="myCtrl"> 
    <button ng-click="myFunc('/buttonPressed2')">b2</button> 
</div> 
</body> 
</html> 

これはサーバーコードです。

var express = require('express');     
var app = express(); 
var expressWs = require('express-ws')(app); 
var button = true; 

app.use(function (req, res, next) { 
    req.testing = 'device-protocol'; 
    return next(); 
}); 

app.get('/', function(req, res){         
    console.log('get route', req.testing); 
    res.sendFile(__dirname + "/" + "button.htm"); 
}); 

app.post('/buttonPressed1', function(req, res){ 
    //do some stuff 
    console.log("Button 1 pressed"); 
    res.send("success"); 
}); 

app.post('/buttonPressed2', function(req, res){ 
    //do some stuff 
    console.log("Button 2 pressed"); 
    res.send("success"); 
}); 
var server = app.listen(8080, function() { 

    var host = server.address().address 
    var port = server.address().port 

    console.log("Test server listening at http://%s:%s", host, port) 
}) 

答えて

1

Docsによれば、角アプリは、二つng-appng-controller、以下のような一つのモジュールとコントローラが、

<body ng-app="buttonApp" ng-controller="myCtrl"> 
<div > 
    <button ng-click="myFunc('/buttonPressed1')">b1</button> 
</div>  
<div> 
    <button ng-click="myFunc('/buttonPressed2')">b2</button> 
</div> 
</body> 

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<script> 
 
    var app = angular.module('buttonApp', []); 
 
    app.controller('myCtrl', function($scope, $http) { 
 
     $scope.myFunc = function(url) { 
 
      console.log("func called"+url); 
 
      
 
     } 
 
    }); 
 
</script> 
 
<body ng-app="buttonApp" ng-controller="myCtrl"> 
 
<div> 
 
    <button ng-click="myFunc('/buttonPressed1')">b1</button> 
 
</div> 
 

 
<div ng-app="buttonApp" ng-controller="myCtrl"> 
 
    <button ng-click="myFunc('/buttonPressed2')">b2</button> 
 
</div> 
 
</body> 
 
</html>

を持つことができません
+0

**は必要ありません**、**は**できません。 Angularは 'ng-app'の2つのコピーを許可していません。 – Claies

+0

@ Claies thatsと言われているのは – Sajeetharan

+0

あなたは「必要ありません」と言っています。これは「持つことができません」と同じではありません。私はそれが全く可能ではないことをもう少し明確にすることができると示唆しています。 – Claies

関連する問題