How can i make my angular app work when running the angular initialisation code in the window onload event
PS : the code in comment works, the code in the onload event doesn't...
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<!--script>
angular.module('dropboxApp', [])
.controller('dropboxController', function () {
var dropbox = this;
dropbox.label = 'hello angular';
});
</script-->
<script type="text/javascript">
window.onload=function() {
angular.module('dropboxApp', [])
.controller('dropboxController', function () {
var dropbox = this;
dropbox.label = 'hello angular';
});}
</script>
</head>
<body>
<div ng-app="dropboxApp" ng-controller="dropboxController as dropbox">
{{dropbox.label}}
</div>
</body>
</html>
Please take a look on my fix for your example in IIFE style:
jsfiddle
<script>
window.onload=(function (angular) {
angular.module('dropboxApp', [])
.controller('dropboxController', function () {
var dropbox = this;
dropbox.label = 'hello angular';
});})(window.angular);
</script>
But I really really really don't suggest you to use window.onload for this purposes. It's really better to use ng-init. And if you're worried about some content, which isn't loaded until page is ready, you can use ng-cloak
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);
See example below and the TODO in the send function : How can I assign the label value in the global send function to dropboxController dropbox.label
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
window.onload=function() {
$('#AddIn').append("<div ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
angular.module('dropboxApp', [])
.controller('dropboxController', function () {
var dropbox = this;
dropbox.label = "hello angular";
});
angular.bootstrap($('#AddIn'), ['dropboxApp']);
}
function send(label)
{
//TODO assign label value to dropboxController dropbox.label
}
</script>
</head>
<body>
<div id="AddIn"></div>
<button onclick="send('new label');">Send</button>
</body>
</html>
Use angular.element and get scope of specific dom element and apply label to it.
Change dropbox.label to $scope.label and inject $scope in controller because this and $scope are different. Check 'this' vs $scope in AngularJS controllers
Keep in Mind: Here I have used myDiv which has scope for angular and added id in append div line.
It's better to use ng-click instead of onclick if possible.
window.onload = function() {
$('#AddIn').append("<div id='myDiv' ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{label}}</div>");
angular.module('dropboxApp', [])
.controller('dropboxController', function($scope) {
var dropbox = this;
$scope.label = "hello angular";
});
angular.bootstrap($('#AddIn'), ['dropboxApp']);
}
function send(label) {
var scope = angular.element($("#myDiv")).scope();
scope.$apply(function() {
scope.label = label;
})
console.log(scope.label);
}
<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<div id="AddIn"></div>
<button id="myButton" onclick="send('new label');">Send</button>
</body>
</html>
I have a button whose text is a binding expression.
It has a ng-click directive which is a function to change the value of the expression.
However, it doesn't work.
What's wrong here?
Here is my plunk: http://plnkr.co/edit/EScqj0iczpH65tstokia
HTML
<!DOCTYPE html>
<html ng-app="test">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-rc.0" src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MyCtrl">
<button ng-click="start()"> {{ myText }} </button>
</body>
JS
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function () {
$scope.myText = 'Starting...';
}
});
I think you got a little confused. In your script.js, you didn't define a start() function, but you called one in your ng-click directive. Instead, you created a starting() function.
This should work:
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function () {
$scope.myText = 'Starting...';
}
});
I try to call a dart function in an AngularJS controller initialization, but I get ReferenceError: myFunction is not defined.
index.dart
import 'dart:js';
myDartFunction() {
return 42;
}
main() {
context['myFunction'] = (JsObject exchange) {
exchange['output'] = myDartFunction();
};
}
My html with AngularJS:
<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
<meta charset="UTF-8">
<title>My Title</title>
</head>
<body>
<div ng-controller="MyCtrl">
<p>{{var}}</p>
</div>
<script type="application/dart" src="index.dart"></script>
<script type="application/javascript" src="../packages/browser/dart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script>
angular.module("MyApp", []).controller('MyCtrl', function($scope) {
var exchange = {};
myFunction(exchange);
$scope.var = exchange['output'];
});
</script>
</body>
</html>
It seems to me, that context['myFunction'] has not been set yet, when controller gets initialized. How can I wait for it and initialize $scope.var?
I found out, that it is possible to use window.onload, which is called after my dart function has been exported to JS. Then I use $scope.$apply to change my scope variable.
angular.module("MyApp", []).controller('MyCtrl', function($scope) {
window.onload = function () {
$scope.$apply(function () {
var exchange = {};
myFunction(exchange);
$scope.var = exchange['output'];
});
}
});
I would suggest to fire an event from Dart after the function was created and execute the code in JavaScript as event handler for this event.