I have a a button with a ng-click that is not firing. Below is the controller and button html. Help - why is it not working?
This is my controller
angular.module('app').controller('MarvelController', MarvelController);
// use to make HTTP requests
MarvelController.$inject = [
"$http"
];
var character = 0;
function MarvelController($http){
var self = this;
console.log(self.update);
self.character = character;
self.glenn = 24;
console.log(self.glenn);
self.chris = function(){
console.log("chris");
}
this is the button that is not firing:
<button ng-click="chris()">button</button>
If you put your function on $scope it will work. Or you can use the controller as syntax. e.g.
<div ng-controller="MarvelController as ctrl">
<button ng-click="ctrl.chris()">button</button>
</div>
var app = angular.module('plunker', []);
app.controller('MainCtrl',['$scope','$http', function($scope,$http) {
$scope.name = 'World';
var self = this;
self.chris = function()
{
console.log("chris");
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl as ctrl">
<p>Hello {{name}}!</p>
<button ng-click="ctrl.chris()">button</button>
</body>
</html>
Related
I am trying to make a To-Do app using AngularJS, but it is saying an error which is related to
Error: $controller:ctrlreg,
the directed link says:
A controller with this name is not registered.
Below is my code with the script.
angular.module('todoApp', [])
.controller('todoController', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<br>
<div ng-app="todoApp" ng-controller="todoController"><br>
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
<br>
</div>
check this out : plnkr
index.html :
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<input ng-model="title"><button ng-click="add()">Add</button>
<br><li ng-repeat="t in tasks">{{t}}</li>
</body>
</html>
app.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
}
});
This is your code running fine,
angular.module('todoApp', [])
.controller('todoController', function($scope){
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.title);
$scope.title = ''
}
})
<!DOCTYPE html>
<html ng-app="todoApp" >
<head>
<meta charset="utf-8" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script src="app.js"></script>
</head>
<div ng-controller="todoController">
<input ng-model="title"><button ng-click="add()">Add</button>
<li ng-repeat="t in tasks">{{t}}</li>
</div>
</body>
</html>
This is the fist angular app that I try to make ,let's see
var app = angular.module('miApp', []);
app.controller('CochesController', function($scope) {
$scope.coche ={
marca:"Renault",
modelo:"Clio",
};
$scope.nombreCompleto = function(){
var x = $scope.coche;
return x.marca+" "+x.modelo;
};
})
and the view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js" data-require="angular.js#1.4.x"></script>
<script data-require="angular.js#1.4.x" data-semver="1.4.8" src="script.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="miApp" ng-controller="CochesController">
<p>{{coche.nombreCompleto()}}</p>
</body>
</html>
I can use the attributes marca and modelo but I can't use the function ¿whats is wrong?
You could directly call the method available inside a controller scope by methodName, It should be like below,
<p>{{nombreCompleto()}}</p>
I understand you can put debounce at or anywhere with ng-model. But what if there are multiple ng-model of the same object and one place to "display" it. And I want to set debounce at the "display" element instead.
For example, how do I make name to slowly display in <p> but sync fast in between input:
http://plnkr.co/edit/RZfqDfNGVdswniuPkuIC?p=preview
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.1/angular.js" data-semver="1.4.1"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p ng-model-options="{ debounce: { 'default': 500 } }">Hello {{name}}!</p>
<input ng-model="name" >
<input ng-model="name">
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
From Documentation
The syntax InvoiceController as invoice tells Angular to instantiate
the controller and save it in the variable invoice in the current
scope.
We also changed all expressions in the page to read and write
variables within that controller instance by prefixing them with
invoice.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js" data-require="angular.js#1.3.x"></script>
<script src="app.js"></script>
</head>
<body ng-controller="InvoiceController as invoice">
<p>Hello {{invoice.name}}!</p>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('InvoiceController', function() {
this.name = 'World';
});
But it is not working as mentioned in the document. I just moved the inline scripts to external file.
PLUNKER DEMO
Also why it is not working if i pass $scope to the controller function
app.controller('InvoiceController', function($scope) {
$scope.name = 'World';
});
You forgot to set the ng-app
<html ng-app="plunker">
<!-- REST OF HTML -->
</html>
Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
Here is my code.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
console.log($scope.fburl);
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div>{{fburl}}</div>
</body>
</html>
Now my question is when I am updating the fbid why fburl is not updating automatically ?
It's because the value can't update after the fact, you need to add a watcher on the variable fbid.
AngularJS docuemntation for $watch
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "";
$scope.$watch('fbid ', function(newValue, oldValue) {
$scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
console.log($scope.fburl);
});
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div ng-bind="fburl"></div>
</body>
</html>
Alternate solution - cleaner way.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fbFn = function() {
return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
};
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
<div >{{fbFn()}}</div>
</body>
</html>
Happy Helping!