I am beginning to use Angularjs. I have this working properly.
There is a dynamically created sidebar listing all the styles.
There is a dynamically created navbar for sizes associated with that style.
When clicked style is "selected" properly.
When clicked size is "selected" properly.
I want these two selections to be parameters in a url that I GET and display within a specific DIV. So the url would look like ...http://xxxddd.com/inventory/{{style}}/{{size}}
I have absolutely no idea where to go from here.
<script>
var app = angular.module("alt", []);
app.controller('StyleController', function(){
this.style = '';
this.selectStyle = function(newValue){
this.style = newValue;
};
this.isSelected = function(styleName){
return this.style === styleName;
};
});
app.controller('SizeController', function(){
this.size = '';
this.selectSize = function(newValue){
this.size = newValue;
};
this.isSelected = function(sizeName){
return this.size === sizeName;
};
});
</script>
I am very new at angular. I hope someone can help me. This is the main hangup with my project right now.
Thanks in advance.
You will want to create a service that utilizes AngularJS' $http library to make a GET request. Look at the documentation and see how to pass parameters (style/size).
You will then want to use AngularJS' Dependency Injection (DI) to inject your service into your controller and call its method which has the $http call.
Related
I have an application where some data must be loaded(ajax) before actual application is rendered. I would like to show some splash screen to provide feedback to user, that something is still loading.
Where/How should I call initialize method of that services?
var app = angular.module('App', []);
app.service('DataSet1', function(){
this.initialize = function(){
//.. returns promiese
}
});
app.service('DataSet2', function(){
this.initialize = function(){
//.. returns promiese
}
});
app.service('DataSet3', function(){
this.initialize = function(){
//.. returns promiese
}
});
I would appretiate any help how to achieve this
edit: adding jsbin example
new answer
jsbin example
This new approach, by passing in {showLoader: true} as part of the request option, you can specify which requests to show the "loading..." panel for.
This leverages httpInterceptor and factory to keep track of pending requests.
old answer (loading will show for any pending request)
http.pendingRequests.length !== 0;
Be sure http is exposed in your scope null.
<spinner ng-if="http.pendingRequests.length"></spinner>
I am very much new in AngularJS and due to which I am facing an issue and not able to understand the exact problem. The code which I tried is worked in normal javascript code but now I want to use custom service (factory function). Actually, I have a textarea where user can input their text and then they can do the formating by selecting any of the text. (discovertheweb.in/woweditor - this is existing site which I have created now I want to apply angular in this code). Now, I have created a custom service to check whether the user select any content or not. I have used the below code in my custom services and try to get the selection start, end point so that I can get the selected text from the textarea field. But, the problem is that I am getting 0 value for both selection start and end point. When i used the same code inside directive it works but try to get the value through service it is showing 0 for both. Please find the below code and let me know the code which I missed out here.
Custom Service:
(function(){
"use strict";
var wsApp = angular.module("WorkApp");
wsApp.factory("InputCheckService", function(){
var defaultText = document.getElementById("input-text-area");
var selStart = defaultText.selectionStart;
var selEnd = defaultText.selectionEnd;
var selectedText;
if(selStart != selEnd){
selectedText = defaultText.value.substring(selStart, selEnd);
}else{
selectedText = null;
}
return {
selStart: selStart,
defaultText: defaultText,
selEnd: selEnd,
selectedText: selectedText
};
});
}());
The directive where I called this services. I already included the service inside the main controller in different file.
(function(){
"use strict";
var wsApp = angular.module("WorkApp");
wsApp.directive("generalDirective", generalDirective);
function generalDirective(){
return {
scope: true,
controller:function($scope, InputCheckService){
$scope.collapsed = false;
$scope.CollpasePanel = function(){
$scope.collapsed = !$scope.collapsed;
};
$scope.updatePara = function(){
alert(InputCheckService.defaultText+"Selection start: "+InputCheckService.selStart+" Selection End: "+ InputCheckService);
/**
* defaultText: defaultText,
selStart: selStart,
selEnd: selEnd,
selectedText: selectedText
*/
}
},
templateUrl: 'directive/general-directive.html'
};
}
}());
If you need any more details, please let me know.
Thanks in advance for your time and suggestion.
Regards,
Robin
You should not use service to manipulate DOM element. You should manipulate DOM only at directives. Your problem is you DONT have anywhere to listen to TEXTAREA SELECTION EVENT and your service will not update the data inside. I have created a fiddle for your problem. The watchSelection directive is based on this answer from stackoverflow. Something you should notice :
I use service only to store data. Something like selStart, selEnd or paragraphContent and provide some API to retrieve the data
.factory("InputCheckService", function () {
return {
setSelStart: function (start) {
selStart = start;
},
.....
},
});
On the watchSelection directive, you watch for the mouseup event and will perform update the service so that it will store value you need and later you can retrieve it from other directives or controllers.
elem.on('mouseup', function () {
var start = elem[0].selectionStart;
//store it to the service
InputCheckService.setSelStart(start);
});
In your generalDirective directive you can get value from your service and angular will auto update the view for you.
Hope it helps.
i really need some help here with angular... this time i have no idea at all.
I want to update my doom, Angular Element using my controller.
For example:
HTML code:
<div ng-controller="UpdateController as UC">
{{UC.updateText}}
<button ng-click="UC.updateIt()"/>
</div>
js code:
angular.controller('UpdateController', function(){
this.updateText = 'Text to Update';
this.updateIt = function(){
// Here i need to update this.updateText.
}
});
I have tried:
angular.controller('UpdateController', function(){
var updateText = this;
updateText.newText = 'Text to Update'
this.updateIt = function(){
updateText.newText = "my new text";
}
});
and i change the HTML as well to {{UC.updateText.newText}}
But it doesn't work, i can see all my changes in console.log();
I have tried multiple ways. using Watch (error, digest already running). and other variables and calls.
Can someone explain me how to do it using 'this.' ?
I don't wan't to use $scope, if i use $scope TAG it updates with no problem, but i don't wan't to give up using the 'this.' tag.
Also, i don't want to use element.angular, or jQuery.
Thanks!
You should be able to just use this.updateText = 'my new text'. It is however recommended to use a variable that is assigned to this as this may change when within a function inside the controller.
angular.controller('UpdateController', function(){
var vm = this;
vm.updateText = 'Text to Update';
vm.updateIt = function(){
vm.updateText = 'my new text';
}
});
Plunkr
I'm trying to developpe a chrome extension with angularjs and I have a strange behaviour when I try to initialize the $scope with the url of the active tab.
Here the code of my controller:
var app = angular.module('app', ['app.service']);
app.controller('ItemCtrl', function ($scope, chromeHelper) {
$scope.website = "No result!";
// Does not work until I click on something :-/
chromeHelper.getActiveTabDomain(function (domain) {$scope.website = domain; });
});
So when I try to initialize directly the $scope.website member it doesn't succeed but when I click on the button aftewards $scope.website then updates.
I really don't understand why.
Here is the code of my Chromehelper service:
var service = angular.module('app.service', []);
service.factory('chromeHelper', function() {
var chromeHelper = {};
chromeHelper.getActiveTabDomain = function (callback){
chrome.tabs.query({'active': true}, function(tabs){
if(tabs && tabs.length > 0) callback(getDomainFrom(tabs[0].url));
});
};
return chromeHelper;
});
function getDomainFrom(url) {
return url.match(/:\/\/(.[^/]+)/)[1];
}
Thank you very much in advance!
The OP solved the problem (see comment above) by adding $scope.$apply() at the end of the callback:
// Does not work until I click on something :-/
chromeHelper.getActiveTabDomain(function(domain) {
$scope.website = domain;
$scope.$apply(); // <-- adding this line did the trick
});
A short explanation for anyone landing on this page with a similar problem:
From the AngularJS docs on 'scope' (more specifically from the section titled 'Scope Life Cycle'):
Model mutation
For mutations to be properly observed, you should make them only within the scope.$apply(). (Angular APIs do this implicitly, so no extra $apply call is needed when doing synchronous work in controllers, or asynchronous work with $http or $timeout services.
See, also, this short demo.
I have a scenario, i which I have a share button, I have a container controller, called metaCtrl, which is on the html tag.
And also inner controllers.
I have a share button, that calls the model.share() function on click.
code:
app.controller('metaCtrl', function($scope){
$scope.model = {};
$scope.model.share = function(){
$location.path('/share').search({'share' : '1'});
}
});
The controller of the share page it self:
app.controller('shareCtrl', function($scope)){
$scope.layout.shareVisible = $location.path().share == 1 ? true : false;
$scope.model.share = function(){
$scope.layout.shareVisible = $scope.layout.shareVisible ? false : true;
var shareUrlValue = $scope.layout.shareVisible ? 1 : null;
$location.search('share', shareUrlValue);
}
});
The idea is to use the same HTML pattern in the entire application, but only to toggle the share section on the share page(if the user is already there), and to send the user to the share view if he is not currently there.
The problem is that after I go to the sahre page, and then return to the other page, the function share() has a referance to the function in the shareCtrl, rather then to the metaCtrl.
I'm not sure there's enough information here, but I'll take a shot at it (I can't comment because I don't have enough rep). Notice that your shareCtrl is not creating a new model object, you're just assigning $scope.model.share = func....
That assignment is overriding the function in the parent controller because Angular is going up the scope chain to find the model object.
See this Plunker:
http://plnkr.co/edit/yv5rrpdlkniZdg94T4Lf
Notice with $scope.model = {} commented out in shareCtrl, the value of both fields is "shareCtrl". But, if you uncomment that line, then $scope.model is within the shareCtrl scope so Angular doesn't go up the scope chain looking.