first, I have read millions of post saying you should not update DOM elements from a Controller in Angular. I know.
When trying to use angular-timer directive (a countdown). I faced some problems, so finally, with the plugin developer help, we did this plunker, which is working and meet my requirements.
http://plnkr.co/edit/CWXnKMbygVDMc8xzshZa?p=preview
However, when moving this code to my app, I got next error when I add the $element to my controller:
`Error: Unknown provider: $elementProvider <- $element`
I have read many posts and I know it can be injected, but I don´t know why it´s not working in my app.
In the other hand, I like to do things right, so I don´t like to implement something that is a bad practice. So, if you have a better approach that works, please let me know.
Looks ugly parsing DOM with jQuery, and I don't understand why you don't use the timer directive within the ng-repeat.
Here's an approach that just adds and extra array to scope for eleapsedTimers which are then displayed using ng-repeat
$scope.elapsedTimers=[];
$scope.$on('timer-stopped', function (data) {
/* loop through bookings to find one that just stopped*/
var now = new Date();
angular.forEach($scope.bookingsList, function (item) {
if (!item.elapsed) {
if (item.booking_date <= now) {
item.elapsed = true;
$scope.$apply(function () {
$scope.elapsedTimers.push(item)
});
}
}
});
});
HTML
<div id="result">
<div ng-repeat="item in elapsedTimers">ID {{item.id}} elapsed</div>
</div>
DEMO
Note...this will add a new property elapsed to the booking object. If this is a problem can create workaround
Related
What is the recommended Angular way of adding custom directives conditionally? No google post or SO article has seemed to really answer my question.
The app allows the user to display and interact with customer information. In one view, the person can click on the order details, which makes an API call to return the data. If the order comes back as a certain type, I want to add an indicator to the already rendered sidebar. It seems like a pretty simple and common use case so I'm wondering what I'm missing.
I'm using Angular 1.4x,
Angular Bootstrap
It is a big app but here is a contrived example of the relevant code:
sidebar.html - before API call:
<div>
Customer Info
Notes
</div>
sidebar.html - what I want to have after API call:
<div>
Customer Info
<a href="#/orders" id="ordertype">
<order-type-directive uib-tooltip="Phone Order" tooltip-trigger="mouseenter" tooltip-placement="top"/>
</a>
Notes
</div>
main-controller.js
angular.module('app.main')
.controller('mainCtrl', function(){
var vm = this;
vm.orderType;
...
vm.getOrderData(memberID)
.then(function(data){
vm.orderType = data.type;
//This is where my question arises
})
})
So I can make a directive:
.directive('orderTypeDirective', function(){
...
})
Or I can just do something like this:
var el = angular.element('#orderType')
.html('<span uib-tooltip="Phone Order" popover-trigger="mouseenter"></span>');
var aNewScope = $scope.$new();
$compile(el)(aNewScope)
But I feel like the above is ugly and hacky. As to how I insert it into the DOM after creating the element, the documentation and all googling assumes I already know how to do that.
For the directive option I've tried to use an ng-if but it doesn't update when the API call comes back and updates vm.orderType.
For the create-element option, I could do something like this inside an if block in mainCtrl:
el.replaceWithEl(el);
But I know there must be a better, more "Angular" way and that I'm missing something glaring.
Have you tried maybe with a ng-if directive ? like:
<div>
Customer Info
<a href="#/orders" id="ordertype">
<order-type-directive uib-tooltip="Phone Order"
tooltip-trigger="mouseenter"
tooltip-placement="top"
data-ng-if="mainCtrl.orderType && mainCtrl.orderType.length>0"/>
</a>
Notes
</div>
Or you can put any other condition in your ng-if directive that maybe match well your case
Trying to manage for angular to scroll automatically to a specific div element when this element becomes visible.
Already searching and trying for hours (no joke) with no success.
So far tried a couple of modules
'angular-scroll'
'angular-ui-scroll'
some others i already forgot
And coudn't get one of them to work (or only on ng-click).
How far did I get?
For this question to answer; I found an example witch basically scrolls but is not what I'am trying to get tho.
e.g.
<button ng-click="scrollToHash()">Scroll</button>
..
..
<div id="#div">
..
</div>
-
function scrollController ($scope, User, $location, $anchorScroll) {
$scope.scrollToHash = function () {
$scope.hash('div');
$anchorScroll();
};
};
This way I can't gat any 'animation duration' on it.
What I know what should work is to set a $watch on the element and call the function if the element is shown.
Not getting anywhere so I ask you guys for help.
Still new on Angular so please don't blame this newbie!
Thanks
I created a service to get my scroll going. You can try this.
Controller:
app.controller("scrollController", function ($scope, scrollToTopService) {
"use strict";
$scope.scrollToHash= function () {
scrollToTopService.scrollToTop();
};
});
Service:
app.service('scrollToTopService', function ($location, $anchorScroll) {
"use strict";
this.scrollToTop = function () {
$anchorScroll.yOffset = 80; //I want it top drop 80px from id. You can remove this.
$location.hash("IdWhereIWantToScroll");
$anchorScroll();
};
});
And here is your view:
<button ng-click="scrollToHash()">Scroll</button>
..
..
<div id="IdWhereIWantToScroll">
..
</div>
Hope this helps. Good luck.
Try to show/hide the elements using nh-show or ng-hide and then put a watch on the property used to show/hide the element. About scrolling, you already have a solution for that.
I'm trying to integrate AngularJs into a legacy Spring MVC application because there is lots of spaghetti javascript code (a huge mess!) to hide / show html elements based on conditions etc.
It uses jsp and lots of custom jsp tags and because the way it is written I'm hesitant to mess with the jsp tags themselves.
I'm trying to do is read the values of the spring input into angular scope and once I have it then can use angular to hide / show stuff.
Assume that my html is something like this
<div ng-app ng-controller="FooCtrl">
Backbone <input type="radio" name="yes" value="Backbone"/>
Angular <input type="radio" name="yes" value="Angular" />
</div>
I'm able to read these elements into Angular's scope like this
$scope.elements = angular.element("input[name='yes']");
But change to the value of these elements are not getting triggered or watched by Angular.
Ideally when the radio button gets checked I would like the model to change. How can I do this?
Thank you in advance.
Here is plnkr with the basic setup.
http://plnkr.co/edit/CRPBFF9FaGivBRa8OSdZ?p=preview
One thing is that in your controller you had:
$scope.$watch('$scope.elements',function(newValue){
console.log(newValue);
},true);
It should be 'elements' rather than '$scope.elements'. I'm not quite sure if a $watch or $watchCollection is going to be your best bet here. I tried it but was having issues.
Here is another idea:
var app = angular.module('myApp',[]);
app.controller('FooCtrl', function($scope){
$scope.message = "hi";
$scope.elements = angular.element("input[name='yes']");
angular.element("input[name='yes']").bind("input change", function(e) {
console.log(e);
});
});
I am trying to update a span's text after a call back function in Angular.
Here is my HTML:
<div ng-controller="onDragController">
<div id="draggableArea">
<div id="rectangle1" data-drag="true" jqyoui-draggable="{onDrag: 'dragCallback'}" data-jqyoui-options="{containment: '#draggableArea'}"></div>
</div>
<div>
<span ng-model="rectangleOne">{{rectangleOne.leftOffset}}</span>
</div>
</div>
And my controller is:
var App = angular.module('drag-and-drop', ['ngDragDrop', 'ui.bootstrap']);
App.controller('onDragController', function($scope) {
$scope.rectangleOne = {};
$scope.rectangleOne.leftOffset = 'ASDF';
$scope.dragCallback = function (event, ui) {
$scope.rectangleOne = {leftOffset: '12345'};
};
});
If I toss an alert in my callback function then I am seeing that the leftOffSet is updated, but on my HTML page the {{rectangleOne.leftOffset}} is staying the same.
What am I missing here...?
Use $apply in your dragCallback as follows:
$scope.dragCallback = function(event, ui) {
$scope.$apply(function() {
$scope.rectangleOne = {
leftOffset: '12345'
};
});
};
This will update your leftOffset in the scope. Here is a Plunker.
It might be helpful to better understand how Angular does two-way data binding. This blog post on how apply works, and why one would be motivated to use it, is pretty good.
In summary, for your changes to $scope.rectangleOne:
You can call $scope.$digest() every time you make a simple change like this. You need to do this so Angular knows to check if your bound data got updated.
Alternatively, you can use $scope.$apply, make the changes to $scope.rectangleOne inside a callback to $apply. It's doing the same thing, $apply ends up calling $digest() indirectly.
In code:
$scope.$apply(function() {
$scope.rectangleOne.leftOffset = '12345';
});
Hope that helps solve your problem, and add a bit of understanding to what's happening behind the scenes!
Background
I have the most basic "newbie" AngularJS question, forgive my ignorance: how do I refresh the model via code? I'm sure it's answered multiple times somewhere, but I simply couldn't
find it.
I've watched some great videos here http://egghead.io and went quickly over the tutorial, but still I feel I'm missing something very basic.
I found one relevant example here ($route.reload()) but I'm not sure I understand how to use it in the example below
Here is the setup
controllers.js
function PersonListCtrl($scope, $http) {
$http.get('/persons').success(function(data) {
$scope.persons = data;
});
}
index.html
...
<div>
<ul ng-controller="PersonListCtrl">
<li ng-repeat="person in persons">
Name: {{person.name}}, Age {{person.age}}
</li>
</ul>
</div>
...
This all works amazingly well, each time the page is reloaded I see the list of people as expected
The questions
Let's say I want to implement a refresh button, how do I tell the model to reload programmatically?
How can I access the model? it seems Angular is magically instantiating an instance of my controller, but how do I get my hands on it?
EDIT added a third question, same as #1 but how can it be done purely via JavaScript?
I'm sure I'm missing something basic, but after spending an hour trying to figure it out, I think it deserves a question. Please let me know if it's duplicate and I'll close + link to it.
You're half way there on your own. To implement a refresh, you'd just wrap what you already have in a function on the scope:
function PersonListCtrl($scope, $http) {
$scope.loadData = function () {
$http.get('/persons').success(function(data) {
$scope.persons = data;
});
};
//initial load
$scope.loadData();
}
then in your markup
<div ng-controller="PersonListCtrl">
<ul>
<li ng-repeat="person in persons">
Name: {{person.name}}, Age {{person.age}}
</li>
</ul>
<button ng-click="loadData()">Refresh</button>
</div>
As far as "accessing your model", all you'd need to do is access that $scope.persons array in your controller:
for example (just puedo code) in your controller:
$scope.addPerson = function() {
$scope.persons.push({ name: 'Test Monkey' });
};
Then you could use that in your view or whatever you'd want to do.
Before I show you how to reload / refresh model data from the server programmatically? I have to explain for you the concept of Data Binding. This is an extremely powerful concept that will truly revolutionize the way you develop. So may be you have to read about this concept from this link or this seconde link in order to unterstand how AngularjS work.
now I'll show you a sample example that exaplain how can you update your model from server.
HTML Code:
<div ng-controller="PersonListCtrl">
<ul>
<li ng-repeat="person in persons">
Name: {{person.name}}, Age {{person.age}}
</li>
</ul>
<button ng-click="updateData()">Refresh Data</button>
</div>
So our controller named: PersonListCtrl and our Model named: persons. go to your Controller js in order to develop the function named: updateData() that will be invoked when we are need to update and refresh our Model persons.
Javascript Code:
app.controller('adsController', function($log,$scope,...){
.....
$scope.updateData = function(){
$http.get('/persons').success(function(data) {
$scope.persons = data;// Update Model-- Line X
});
}
});
Now I explain for you how it work:
when user click on button Refresh Data, the server will call to function updateData() and inside this function we will invoke our web service by the function $http.get() and when we have the result from our ws we will affect it to our model (Line X).Dice that affects the results for our model, our View of this list will be changed with new Data.