AngularJS ng-click stopped working suddenly - javascript

I am in the midst of troubleshooting a webpage that is able to open up a specific title from index.html to titleDetails.html.
However, ng-click in my index.html stopped working all of a sudden. I did not make any changes that could affect the link. It has been working fine all along (redirection of page from index.html to titleDetails.html) .
Original post here
Below are my codes:
app.js
(function () {
angular
.module("BlogApp", [])
.controller("BlogController", BlogController);
function BlogController($scope, $http) {
$scope.createPost = createPost;
$scope.deletePost = deletePost;
$scope.editPost = editPost;
$scope.updatePost = updatePost;
$scope.postDetail = null;
function init() {
getAllPosts();
}
init();
function titleDetails(post){
$scope.postDetail = post;
window.location = "/titleDetails.html";
}
function updatePost(post){
console.log(post);
$http
.put("/api/blogpost/"+post._id, post)
.success(getAllPosts);
}
function editPost(postId){
$http
.get("/api/blogpost/"+postId)
.success(function(post){
$scope.post = post;
});
}
function deletePost(postId){
$http
.delete("/api/blogpost/"+postId)
.success(getAllPosts);
}
function getAllPosts(){
$http
.get("/api/blogpost")
.success(function(posts) {
$scope.posts = posts;
});
}
function createPost(post) {
console.log(post);
$http
.post("/api/blogpost",post)
.success(getAllPosts);
}
}
})();
index.html
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<input ng-model="post.title" class="form-control" placeholder="title"/>
<textarea ng-model="post.body" class="form-control" placeholder="body"></textarea>
<button ng-click="createPost(post)" class="btn btn-primary btn-block">Post</button>
<button ng-click="updatePost(post)" class="btn btn-success btn-block">Update</button>
<div ng-repeat="post in posts">
<h2>
<a ng-click="titleDetails(post)">{{ post.title }} </a>
<a ng-click="editPost(post._id)" class="pull-right"><span class="glyphicon glyphicon-pencil"></span></a>
<a ng-click="deletePost(post._id)" class="pull-right"><span class = "glyphicon glyphicon-remove"></span></a>
</h2>
<em>{{post.posted}}</em>
<p>{{post.body}}</p>
</div>
</div>
</body>
</html>
titleDetails.html:
<!DOCTYPE html>
<html lang="en" ng-app="BlogApp">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<title>Title</title>
</head>
<body>
<div class="container" ng-controller="BlogController">
<h1>Blog</h1>
<div>
<h2>
<a>{{ postDetail.title }} </a>
</h2>
<em>{{postDetail.posted}}</em>
<p>{{postDetail.body}}</p>
</div>
</div>
</body>
</html>

You are missing $scope.titleDetails = titleDetails; in your controller.
Furthermore, I would recommend using controller as syntax.
So it would be something like this:
index.html
<div class="container" ng-controller="BlogController as blogCtrl">
...
<a ng-click="blogCtrl.titleDetails(post)">{{ blogCtrl.post.title }} </a>
your controller
function BlogController($scope, $http) {
var vm = this;
vm.titleDetails = titleDetails;
//rest of your code using 'vm' instead of '$scope'
This way, you can stop using $scope.
You can find more details here.

Related

AngularJs - Argument 'AppController' is not a function, got undefined

I have a problem that has frustrated me, I get the error Error: [ng: areq] Argument 'AppController' is not a function, got undefined, I have not been able to solve it, I have tried many ways but in all of them I get this same error, does anybody know how I can fix it?
my html:
<div class="container app-topmargin" ng-app="sampleAngularApp" ng-controller="AppController">
<div class="row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-3">
<button class="btn btn-primary" ng-click="openDlg()">Open Modal</button>
</div>
</div>
<ng-include src=""></ng-include>
</div>
my app.js:
var app = angular.module("sampleAngularApp", []);
app.controller("AppController", ["$scope", function ($scope) {
$scope.openDlg = function () {
console.log("clicked here...");
var dlgElem = angular.element("#modalDlg");
if (dlgElem) {
dlgElem.modal("show");
}
};
}]);
Try passing the controller as an argument in the array of your angular module.
var app = angular.module("sampleAngularApp", ['AppController']);
app.controller("AppController", ["$scope", function ($scope) {
$scope.openDlg = function () {
console.log("clicked here...");
var dlgElem = angular.element("#modalDlg");
if (dlgElem) {
dlgElem.modal("show");
}
};
}]);
Your code works fine for me:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="app.js"></script>
<div class="container app-topmargin" ng-app="sampleAngularApp" ng-controller="AppController">
<div class="row">
<div class="col-xs-12 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-3">
<button class="btn btn-primary" ng-click="openDlg()">Open Modal</button>
</div>
</div>
<ng-include src=""></ng-include>
</div>
</body>
</html>
app.js
var app = angular.module("sampleAngularApp", []);
app.controller("AppController", ["$scope", function ($scope) {
$scope.openDlg = function () {
console.log("clicked here...");
};
}]);
Perhaps check the order in which you're loading the scripts.

how to get data in ng dialog angularjs using http method?

Getting Data from database with php. Data is fine. Butt data is not showing in NgModel box. I have passed scope parameter in ngdialog function. Please help me out.
var adminapp = angular.module("uibootstrap", ["ngRoute", 'ngDialog']);
adminapp.controller("homedata", function($scope, $rootScope, $http, $httpParamSerializerJQLike, ngDialog, $timeout) {
$rootScope.theme = 'ngdialog-theme-default';
$scope.openDefault = function() {
ngDialog.open({
template: 'firstDialogId',
className: 'ngdialog-theme-default',
scope: $scope
})
};
// get user
$http.get('http://localhost/database/get-user.php').success(function(response) {
$scope.users = response;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<li ng-repeat="item in users">
<a href="javascript:void(0);" ng-click="openDefault()">
<div class="img"><img alt="" src="admin/images/user-img2.jpg"> <span class="status-red"></span></div>
<div class="msginfo">
{{item.user_name}} <br> <span>{{item.user_status}}</span>
</div>
</a>
<script type="text/ng-template" id="firstDialogId">
<div class="ngdialog-message">
<div class="data">
<div class="img">
<img alt="" src="http://localhost/rockeditor/admin/images/img-user.png"> <a class="editbtn" href="#"><i class="fa fa-edit"></i></a>
</div>
<div class="name">{{item.user_name}}</div>
<span class="editor">{{item.user_status}}</span>
<span class="email">{{item.user_email}}</span>
<input class="btn-green" type="submit" value="Save">
</div>
</div>
</script>
</li>
variable item is not available in your template firstDialogId, actually it's not a child node of <li></li>
You forget to include controller in your html.
Use ng-controller="homedata" on <li> element
item is not accessible in that script tag
$scope.users is available after $http call returned with success response
See here
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="ngDialog.css" />
<link rel="stylesheet" href="ngDialog-theme-default.css" />
<script data-require="angular.js#*" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<script src="ngDialog.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="MyApp" ng-controller="homedata">
<button ng-click="clickme()">Hello World</button>
<script type="text/ng-template" id="firstDialogId">
<div ng-repeat="user in users">
<div>Current user:</div>
<div>{{user.name}}</div>
</div>
</script>
</body>
</html>
script.js
// Code goes here
angular.module("MyApp", ['ngDialog'])
.controller("homedata", homedata)
function Main($scope, ngDialog) {
$scope.users = [
{name: 'abc'},
{name: 'xyz'}
];
$scope.clickme = function() {
ngDialog.open({
template: 'firstDialogId',
className: 'ngdialog-theme-default',
scope: $scope
});
};
}
But as per your controller, There is a $http call and until it responded you don't have any data in $scope.users. So, please make sure that it and you only get data in your dialog after the $http is get success response

Why my onclick doesn't work?

I am new on this field, and have tried this for a long time. You can see my simple version here:
https://plnkr.co/edit/YeahrG28bT2izX8gMKor?p=preview
Could you tell me why my onclick here doesn't work? My button is the 2signUp botton, Thanks!
js:
var app = angular.module('myApp', []);
app.controller('mainControl', function($scope) {
$scope.logged = false;
$scope.visiter = true;
var sub1 = document.getElementsByClassName("haha")[0];
sub1.onclick=function(){
$scope.logged = !$scope.logged;
}
})
html:
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="mainControl">
<div ng-show="logged">
<button>1Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="visiter">
<button class="haha">2Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="logged">
hello
</div>
</body>
Use the Angular way of handling click events, don't use any document.getElementById() jazz when you have angular to do the work for you.
This is why you should let angular handle it
Data Binding
Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. This is awesome because it eliminates DOM manipulation from the list of things you have to worry about.
https://angularjs.org/
Use Angular's ngClick
var app = angular.module('myApp', []);
app.controller('mainControl', function($scope) {
$scope.logged = false;
$scope.visiter = true;
$scope.signup = function() {
$scope.logged = !$scope.logged;
alert("ran the function");
}
})
<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="MainViewController.js"></script>
</head>
<body ng-controller="mainControl">
<div ng-show="logged">
<button>1Sign Up</button>
<button>Log In</button>
</div>
<div ng-show="visiter">
<button id="haha" ng-click="signup()">2Sign Up</button> <!-- use ngClick here! -->
<button>Log In</button>
</div>
<div ng-show="logged">
hello
</div>
</body>
</html>

ngDialog not showing modal when clicked and no errors shown on the browser console

I am trying to implement a modal popup in angularjs using ngmodal. The code runs ,there is no error returned on the browser console but nothing happens when the modal is clicked. Below is my attempt and code
Index.html file
<html ng-appp="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
<script src="ngDialog.js"></script>
<link src="ngDialog.css"></link>
<script src="ngDialog.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
</div>
</script>
</div>
</body>
</html>
app.js file
var myApp = angular.module('myApp',['ngDialog']);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'templateId' });
};
}
function tt($scope)
{
$scope.test = function()
{
console.log("AaA");
}
}
Source of tutorial http://jsfiddle.net/mb6o4yd1/6/
Kindly assist
HTML Page.
You didnt put ng-app
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ngDialog.js"></script>
<script src="Scripts/app.js"></script>
<link href="Content/ngDialog.css" rel="stylesheet" />
<link href="Content/ngDialog-theme-default.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
</div>
<script type="text/ng-template" id="templateId">
<div ng-controller="tt" class="ngdialog-message">
<button ng-click="test()">Click here </button>
</div>
</script>
</div>
Here is your app.js
var myApp = angular.module('myApp', ['ngDialog']);
myApp.controller('MyCtrl', function ($scope,ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId'
});
};
});
myApp.controller('tt', function ($scope) {
$scope.test = function () {
alert('It works');
}
});
Let me know still you find any problem.(I have added ngDialog-theme-default.css )

Why isn't my Angular.js GET request working?

My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.
Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>
You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>

Categories