In the following AngularJS code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js" ></script>
</head>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', '$rootScope', function ($scope, $rootScope)
{
// let's assume that scope was dependency injected as the $rootScope
var scope = $rootScope;
scope.name = 'misko';
scope.counter = 0;
scope.$watch('name', function(newValue, oldValue)
{
scope.counter = scope.counter + 1;
});
scope.$digest();
}]);
</script>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div id="divCool" ng-show="false">Cool</div>
</div>
</div>
</body>
</html>
scope.$digest(); crashes but I don't know why. I took the code inside the controller straight from angularjs.org
There is no reason for calling digest in that context. Angular manages that for you. Actually, you hardly ever are going to need to use that function, but most commonly apply.
In this case, the code is taken from angular docs in a context of unit testing, where the scope needs to be refreshed by yourself for the assertions after setting up the test conditions.
Related
How to use window.onload function inside a controller.
window.onload= function() {
console.log("Hi Page loaded")
};
The controller is not applicable for the full page.
I want to execute a function after my controller loads at-least.
You can use ng-init and invoke your necessary function using the same directive
var app = angular.module('DemoApp', [])
app.controller('akuaController', function($scope) {
$scope.load = function() {
alert("Window is loaded");
}
});
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="DemoApp" ng-controller="akuaController">
<div ng-init="load()">
</div>
</body>
</html>
Changing the example from Angular $window
Your Controller
angular.module('windowExample', [])
.controller('ExampleController', ['$scope', '$window', function($scope, $window) {
$scope.greeting = 'Hello, World!';
$scope.doGreeting = function(greeting) {
// This would be a starting point
$window.onload(greeting);
};
}]);
Your markup
<div ng-controller="ExampleController" ng-init="ExampleController.doGreeting()">
</div>
//inside your controller
$scope.$on('$viewContentLoaded', function() {
// write here
// either methods or variables
});
I am trying to write a service, which will compile HTML for a directive and append it to the body element. While the text is being processed by the directive the functions are not.
Here's a simpler version which I am not able to do the same with ng-click directive and compiling it from the controller. Can anyone please tell me how I can achieve this. My goal is to create a very basic directive similar in functionality to that of modals from angular ui-bootstrap or dialog service from Angular material.
angular
.module('app', [])
.controller('ctrl', ctrl);
function ctrl($scope, $compile) {
var html = '',
newScope = $scope.$new(true),
newScope1 = $scope.$new(true);
$scope.text = 'from controller';
$scope.fun = function() {
alert('from controller');
};
newScope.text = 'from controller with new scope';
newScope.fun = function() {
alert('from controller with new scope');
};
newScope1.text = 'from controller with new scope1';
newScope1.fun = function() {
alert('from controller with new scope1');
};
html = $compile('<button ng-click="fun">{{text}}</button>')($scope);
angular.element('body').append(html);
html = $compile('<button ng-click="fun">{{text}}</button>')(newScope);
angular.element('body').append(html);
$compile('<button ng-click="fun">{{text}}</button>')(newScope1, function(clonedElement, scope) {
console.log(clonedElement, scope);
angular.element('body').append(clonedElement);
});
}
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app" ng-controller="ctrl">
<h1>Hello Plunker!</h1>
</body>
</html>
plunkr
you're doing it right just call the method use ng-click="fun()" instead of ng-click="fun"(the only thing missing)
html = $compile('<button ng-click="fun()">{{text}}</button>')(newScope);
I have a page as follows. The controller is not working. Can someone please suggest me whats wrong?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="demoApp">
<head>
<title>AnjularJs Hello World</title>
</head>
<body data-ng-controller="CustomerController">
<h2>Customers</h2>
<div id="Trial">{{name}}</div>
<script src="Scripts/angular.js"></script>
<script>
(function () {
alert("Inside Self invoking function. This is popping up.");
CustomerController = function ($scope) {
alert("Inside controller. But this is NOT popping up");
$scope.name = 'HeHe';
};
CustomerController.$inject = ['$scope'];
angular.module('demoApp').controller('CustomerController', CustomerController);
}());
</script>
</body>
</html>
Alert inside the controller is not popping. The first alert is popping. Also the div with id="Trial" is not printing the name.
What am I missing?
You never create your demoApp-module. With angular.module(name) you get an already created module, with angular.module(name, dependencies) you set(create) a module. So simply add:
angular.module('demoApp', []);
above the line with angular.module('demoApp') and your cord works just fine:
(function () {
alert("Inside Self invoking function. This is popping up.");
CustomerController = function ($scope) {
alert("Inside controller. But this is NOT popping up");
$scope.name = 'HeHe';
};
CustomerController.$inject = ['$scope'];
angular.module('demoApp', []);
angular.module('demoApp').controller('CustomerController', CustomerController);
}());
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="demoApp" data-ng-controller="CustomerController">
<h2>Customers</h2>
<div id="Trial">{{name}}</div>
</body>
I have implemented a code to show a busy icon and this is it
angular.module("app", [])
.controller('UploadCtrl', function ctrl ($scope, $timeout) {
$scope.busy = false;
$scope.submit = function () {
$scope.busy = true;
// pretend to make an http call...
$timeout(function () {
$scope.busy = false;
}, 10000);
};
});
This is the index.html file
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="app.js"></script>
<meta charset="utf-8">
<title>Busy Runner</title>
</head>
<body ng-app="app" ng-controller="ctrl">
<button ng-disabled="busy" ng-click="submit()">Submit <i class="fa fa-spinner fa-spin" ng-show="busy"></i></button>
</body>
</html>
When I run the code the busy loader keeps running. Please what could be wrong.
This is the plunk I have made.
view plunk
You reference a controller which not exists. Fix the HTML code
<body ng-app="app" ng-controller="UploadCtrl">
angular.module("app", [])
.controller('UploadCtrl', function ctrl ($scope, $timeout) {
$scope.busy = false;
In the above code you have name your controller as 'UploadCtrl' ,where as, in HTML file
<body ng-app="app" ng-controller="ctrl">
controller is 'ctrl' , due to which it can't load the controller hence the angular part is not executed.
Change your app.js to
angular.module("app", [])
.controller('ctrl', function ($scope, $timeout) {..}
View plunkr
Also I removed ng-disabled from <button ng-disabled="busy" ng-click="submit()">Submit since you are already using $scope.busy = false; as soon as script loads.
Checkout ngController .
I have following angular code
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Test : {{mytest()}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name= "John ";
$scope.mytest = function () {
console.log('my test');
return 'something';
};
});
</script>
</body>
</html>
For more detail, please refer to http://plnkr.co/edit/UIu50AOLMwKIJnAphIB5
Problem: when view in Chrome browser 'Inspect Element' console, the function 'my test' is called 3 times! Why ?
Because you've asked angular to do that. This expression
{{mytest()}}
Is in fact instruction:
"angular, do check if the result value of mytest() is not changing. And do that regularly".
And angular is checking that few times, to be sure that it is not changed. And later, in some other digest it will do the same again
so, rather trigger that method once, and let angular to watch the resulting expression, like with a name above
{{name}}