I'm trying to set an ng-style:
javascript:
$offset='top:'+info.scrollTop+'px';
$scope.scrollTop = $offset;
console.log($scope);
markup:
<div ng-controller="Legal" ng-style="scrollTop" class="footer">
the scope on console.log contains a node called scrollTop with the value "top:0px"
Try this (color works, but top I'm not sure):
JavaScript:
angular.module('App', []);
function Legal($scope) {
var offset = {color:'red', top: '100px'};
$scope.scrollTop = offset;
console.log($scope.scrollTop);
}
HTML:
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-controller="Legal" ng-style="scrollTop" class="footer">Test {{scrollTop}}</div>
</body>
</html>
Plunker example
The ngStyle directive accepts an object with style names as keys, not a string:
$offset= info.scrollTop+'px';
$scope.scrollTop = {top: $offset};
Then your markup will work:
<div ng-controller="Legal" ng-style="scrollTop" class="footer">
Fiddle
Related
I am using below example and it's not printing the value defined in $event
Below is my app.js
var myModule = angular.module("myModule",[])
myModule.controller("myController",function($scope){
$scope.someName = "test";
})
Below is my html
<html ng-app="myModule">
<head></head>
<body>
<div ng-controller="myController">
This is Angular JS {{ someName }}
</div>
</body>
</html>
There are no issues with your code. Make sure you have refered angularjs reference as below
DEMO
var myModule = angular.module("myModule",[])
myModule.controller("myController",function($scope){
$scope.someName = "test";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="myModule">
<head></head>
<body>
<div ng-controller="myController">
This is Angular JS {{ someName }}
</div>
</body>
</html>
New to AngularJS here (have used BackboneJS before), and am trying to learn AngularJS. I'm attempting to basically render a bunch of objects with their own div "views." In my controller, I have an array of objects (all objects with same properties) that I would pretty much like to render as sticky-notes. My thought process was to somehow grab the data from each object in the array, and render each as div's (which I could style to look like a sticky-note).
The code I have thus far:
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', '$http', function ($scope, $http, Note) {
$scope.notesArray= [];
$http.get('notes_data.json').success(function(data) { // basically grab all the data from a JSON file
data.data.forEach(function(obj) {
$scope.notesArray.push(obj);
});
})
}]);
My index.html looks like:
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
Some stuff here
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
Also, it'd be great if someone could comment on how I can represent these objects more effectively (using a factory, service, etc). Thanks!
Do something like this, with ng-repeat :
<!doctype html>
<html>
<head>
<title>My Angular App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<div class="note" ng-repeat="note in notesArray">
<div class="wrapper" ng-class="note.done ? 'done' : 'undone'">
<p class="title">{{note.title}}</p>
<span class="done">{{note.done}}</span>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I am new to Angularjs so i made one example to call a controller but i am not able to call controller ...
this is my sample code
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
</head>
<body ng-app="">
<div data-ng-controller="mycontroller">
</div>
<script>
function mycontroller($scope, $http) {
alert("alert");
}
</script>
</body>
try this
<body ng-app="learning">
<div data-ng-controller="mycontroller">
</div>
<script>
angular.module("learning", [])
.controller("mycontroller", function($scope, $http) {
alert("alert");
});
</script>
</body>
You can try this, but I recommend you to read angular tutorials to understand how controllers and binds works.
http://www.w3schools.com/angular/
https://docs.angularjs.org/tutorial
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="mycontroller" ng-init="initMethod()">
<!--<input type="text" ng-model="test"></p>
<div>{{test}}</div>-->
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
alert("alert")
$scope.initMethod = function(){
alert("alert from init");
}
});
</script>
</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>
I have many items in a long listview. How can my users jump to (i.e. bookmark) to a specific item by visiting mypage.html#the_item_id ?
Actually, it can when I use inline view [Sample 1], but not when I use partial view [Sample 2]. Is there a bug in the latter case, or must I use any workaround?
Thanks in advance!
Sample 1: You can visit page.html#a100 to see item 100 ::
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
function MainCtrl($scope){
$scope.items = [];
for(var i=0; i<200; i++){$scope.items.push({id: i})}
}
</script>
</head>
<body ng-controller='MainCtrl'>
<div>
<ul>
<li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
</ul>
</div>
</body>
</html>
Sample 2: Can NOT visit page2.html#a100 to see item 100, WHY? ::
<!doctype html>
<html ng-app>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
function MainCtrl($scope){
$scope.items = [];
for(var i=0; i<200; i++){$scope.items.push({id: i})}
}
</script>
</head>
<body ng-controller='MainCtrl'>
<div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div>
</body>
</html>
And this is the scroll_view.html needed by sample 2::
<div>
<ul>
<li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
</ul>
</div>
You have to use autoscroll attribute on ng-include.
Check the docs here: http://docs.angularjs.org/api/ng.directive:ngInclude
autoscroll(optional) – {string=} – Whether ngInclude should call $anchorScroll to scroll the viewport after the content is loaded.
If the attribute is not set, disable scrolling.
If the attribute is set without value, enable scrolling.
Otherwise enable scrolling only if the expression evaluates to truthy value.
So in your case:
<div ng-include="'scroll_view.html'" autoscroll></div>
I think html5Mode needs to be set to true, but I'm not certain. See if this works for you (it did for me, but I only tested on Chrome 23 loading the page using file:///...):
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
<script type="text/ng-template" id="scroll_view.html">
<div>
<ul>
<li ng-repeat="i in items"><a id='a{{i.id}}'>{{i.id}}</a></li>
</ul>
</div>
</script>
<script>
function MainCtrl($scope){
$scope.items = [];
for(var i=0; i<200; i++){$scope.items.push({id: i})}
}
</script>
</head>
<body ng-controller='MainCtrl'>
<div ng-include="'scroll_view.html'"><!-- MUST use "'...'" notation here --></div>
</body>
</html>
app.js:
var app = angular.module('app', []).
config(function($locationProvider) {
$locationProvider.html5Mode(true);
})