I've not worked on angularJS. I'm trying to navigate to a different page using button onclick functionality.
<html>
<head>
<script src="js/angular.min.js"></script>
</head>
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<body ng-app="myapp">
<div ng-controller="TestCtrl">
<button ng-click="clicked()">Click</button>
</div>
<script src="script.js"></script>
</body>
</html>
Here is the JS code
var VLogin = angular.module('myapp',[]);
VLogin.controller('TestCtrl', function($scope) {
$scope.clicked = function(){
window.location = "#/index.html";
};
});
Try this:
$scope.clicked = function(){
window.location.href = "#/index.html";
};
Related
I'm trying to trigger a click on a link, but it only runs the ng-click
From MyScript.js:
$timeout(function () {
angular.element(document.querySelector('#cancelButton')).triggerHandler('click');
}, 0);
And from Index.cshtml:
<input class="popupButton" type="button" value="Anuluj" />
I know that the way I did with
<a...><input... /></a>
is wrong,
but the important thing is: how to it to click the link and the ng-click?
I have written a simple program to navigate to the link.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div ng-app="app">
<div ng-controller="ctrl">
Redirect to Click Me!
</div>
</div>
<script src="../lib/angular.js"></script>
<script>
var app = angular.module('app', []);
app.controller('ctrl', function ($scope, $log, $window) {
$scope.redirect = function () {
var url = "http://www.google.com";
$window.location.href = url;
};
});
</script>
</body>
</html>
Is this what you wanted?
I am new to learning AngularJs and stuck at this particular error. Can't seem to find the reason behind this error. Any help will be appreciated.
I am using AngularJs 1.2.
Please advise.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body ng-app="Heirarchy">
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
<script type="text/javascript">
var app = angular.module("Heirarchy",[]);
app.controller("ParentController",function($scope){
$scope.person = {greeted:false};
});
app.controller("ChildController",function($scope) {
$scope.sayHello = function(){
$scope.person.name="Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>
Update your code
Insert ng-app="your module name" in your html tag, and do not repeat ng-app in your app
<!doctype html>
<html ng-app="Heirarchy">
<head>
</head>
<body>
<div ng-controller="ParentController">
</div>
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("Heirarchy", []);
app.controller("ParentController", function ($scope) {
$scope.person = { greeted: false };
});
app.controller("ChildController", function ($scope) {
$scope.sayHello = function () {
$scope.person.name = "Blade";
$scope.person.greeted = true;
}
});
</script>
</body>
</html>
I have the following angular sample app:
<html ng-app="theapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script>
</head>
<body>
<div ng-controller="bootstrapper">
<p>This is the bootstrapper</p>
<p><button ng-click="loadtemplate1()">Load Template1</button></p>
<p><button ng-click="testalert()">Test Alert</button></p>
</div>
<script type="text/html" id="template1">
<div ng-controller="template1">
<p>This is template one {{1+5}}</p>
</div>
</script>
<script type="text/javascript">
angular.module('theapp',[])
.controller('bootstrapper',function($scope){
//alert('bootstrapper controller');
$scope.testalert=function(){
alert('call from testalert');
};
$scope.loadtemplate1=function(){
var html=document.getElementById('template1').innerHTML;
document.getElementsByTagName('body')[0].innerHTML=html;
};
})
.controller('template1',function($scope){
alert('template1 controller');
});
</script>
</body>
</html>
All I'm trying to achieve is to dynamically load a controller from some html string which resides in the same page.
However, I need some help, as this current setup doesn't seem to work.
I have this button with data="test" when I mouseover the button I want to show the word test in {{Detail}} when I mouse out from the button {{Detail}} should show nothing.
</head>
<body ng-app="">
<button ng-mouseover="Detail = data" data="test" >MouseOver Me</button>
Details: {{Detail}}
</body>
</html>
<button ng-mouseover="Detail = data" ng-mouseleave="Detail=''" ng-init="data='test'" >
i think this code is useful for you
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="Scripts/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function ($scope) {
$scope.data="test"
$scope.hoverIn = function () {
this.hoverEdit = true;
};
$scope.hoverOut = function () {
this.hoverEdit = false;
};
})
</script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl" >
<button ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()" title="{{data}}">MouseOver Me</button>
Details: <span ng-show="hoverEdit">{{data}}</span>
</body>
</html>
I have written a simple sample custom angular directive and added the directive twice in the HTML.
Below is the sample.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap.css" rel="stylesheet" />
<script>
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('rkitem', function () {
return {
restrict: 'E',
template: '<h4> template text </h4>'
}
});
var myApp = angular.module('myApp', ['myDirectives']);
var ctrl = function ($scope) {
$scope.fname = 'test';
}
myApp.controller('ctrl', ctrl);
</script>
</head>
<body ng-app="myApp">
<div class="container" ng-controller="ctrl">
<div class="row">
<rkitem />
<rkitem />
</div>
</div>
</body>
</html>
Expected Output : template text should be displayed twice as rkitem element mentioned twice in HTML
Acutal Output : template text is getting displayed only once
Can anyone please explain why it is getting displayed only once and not twice.
You should add closing tags to your directive elements:
<div class="row">
<rkitem></rkitem>
<rkitem></rkitem>
</div>