AngularJs ng-click对于控制器的本地对象不起作用
[英]AngularJs ng-click not working for controller'c local object
问题描述
I am new to Angular. 
我是Angular的新手。 I went to intro-tutorials on some website. 我去了一些网站的入门教程。 There I learned that I can access controller functions and controller-local variables using controller-name and without $scope service. 在那里，我了解到可以使用controller-name来访问控制器功能和控制器局部变量，而无需$scope服务。 Like for example: 例如：
<div ng-controller="someController">
someController.someFunction()
someController.someVariable
</div>
I my simple application I have written a controller in controllers.js and using it in home.html . 我在我的简单的应用程序我已经写在控制器controllers.js和使用它home.html 。 I have defined the mapping in app.js 我已经在app.js定义了映射
I provided a button tag for it in html but the controller function is just not responding. 我在html中为其提供了一个button标签，但控制器功能只是没有响应。
Looking at my js and HTML page you will know what I am trying to accomplish. 查看我的js和HTML页面，您将了解我要完成的工作。
Here' controllers.js : 这是controllers.js ：
app.controller('welcomeStoryPublishCtrl', ['$log','$http',function($log,$http){
this.wsPublish = {};
this.publishGroup = function(wsPublish){
console.log('here');
$http({
method:'POST',
url: 'http://localhost:9090/Writer/publishStory',
header: {'Content-Type':'application/json'},
data: wsPublish
});
};
this.public = function(){
console.log('from public');
};
}]);
home.html home.html
<html> <head> <script src="js/angular.min.js"></script> <script src="js/angular-route.min.js" ></script> <script src="https://jspm.io/system@0.16.js"></script> <script src="js/app.js"></script> <script src="js/controllers.js"></script> </head> <body> <div> <div id="welcomeStory"> <span id="wsTitleBub">Title</span> <input id="wsTitle" type="text" ng-model="wsPublish.welcomeStoryTitle" />{{wsPublish.welcomeStoryTitle}} <h6>Words..</h6> <textarea id="wsWords" ng-model="wsPublish.welcomeStoryWords"></textarea> <input id="wsPublish" type="button" name="wsPublish" value="Publish" ng-click="pub = !pub" /> <input id="wsAddShelf" type="button" name="wsAddToShelf" value="Add To Shelf" ng-click="addToShelf()" /> </div> <div id="wsPublishTo" ng-show="pub"> <ul> <li> <input type=submit id="wsgroups" value="Group" ng-click="publishGroup(wsPublish)" /> </li> <li> <button id="wsPublic" ng-click="public()">Public</button> </li> </ul> </div> </div> </body> </html>
I know that I can do this by injecting $scope module dependency and I know controller instantiation always creates a $scope object itself. 我知道我可以通过注入$scope模块依赖项来做到这一点，并且我知道控制器实例化总是会自己创建一个$scope对象。
But what if try doing so like this? 但是，如果尝试这样做，该怎么办？ What am I doing wrong here? 我在这里做错了什么？
And here is app.js : 这是app.js ：
angular.module('Writer', ['AllControllers','ngRoute'])
.config(['$routeProvider', function($routeProvider,$Log){
$routeProvider.when('/Diary',{
templateUrl:'pages/login.html',
controller: 'LoginFormController'
})
.when('/loginPg',{
template: 'Hello from app.js'
})
.when('/home',{
templateUrl: './pages/home.html',
controller: 'welcomeStoryPublishCtrl'
})
.otherwise({redirectTo : '/Diary'});
}]);
3 个解决方案
解决方案1
0 2016-02-29 07:39:41
First off all your input elements are not wrapped in a <form> tag and this is why your button should not be working properly. 首先，所有输入元素都没有包装在<form>标记中，这就是为什么您的按钮不能正常工作的原因。 If you insist to use <button> it should be in a <form> tag so it "submits" the form, if not, go with <input type="submit"..> Lastly, i would suggest you to use services for your http requests as this is a common good practice. 如果您坚持使用<button>它应该在<form>标记中，以便它“提交”表单，否则，请使用<input type="submit"..>最后，我建议您将服务用于您的http请求，因为这是一种常见的良好做法。 :) :)
解决方案2
0 2016-02-29 07:41:48
In your HTML you have not mentioned the ng-app directive neither have you mentioned your controller directive ng-controller . 在您的HTML中，您没有提到ng-app指令，也没有提到控制器指令ng-controller 。
Your HTML 您的HTML
<body ng-app="someApp">
<div>
<div id="welcomeStory" ng-controller="welcomeStoryPublishCtrl as wsCtrl">
<!-- Rest of your code -->
<button ng-click="wsCtrl.public()">Public</button>
Your JS 你的JS
var app = angular.module('someApp', []);
app.controller('welcomeStoryPublishCtrl', ['$log','$http',function($log,$http){
this.wsPublish = {};
this.publishGroup = function(wsPublish){
console.log('here');
$http({
method:'POST',
url: 'http://localhost:9090/Writer/publishStory',
header: {'Content-Type':'application/json'},
data: wsPublish
}).success(function(data){
console.log('run success!');
});
};
this.public = function(){
console.log('from public');
};
}]);
Hope this helps. 希望这可以帮助。
解决方案3
0 2016-02-29 07:55:42
您是否缺少ng-app属性？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.