Code in plunker.
I have two controllers. In first controller i have handler for button in my view
$scope.click = function () {
$location.url("/some");
console.log("clicked");
}
In handler i change URL. I also configured my $routeProvider.
var app = angular.module('plunker', []).config( function ($routeProvider) {
$routeProvider.when('/some', {template: " counter is {{n}}</br> <button ng-click='click()'>click to load new url but still with \"loading cntl\"</button>", controller: "loading"})
.when("/second",{controller: "loading"});
});
Here i have two different routes that have the same controller - loading controller
So after my URL was changed to /some new button appears in my view. I have another handler for this button in loading controller.
app.controller("loading", function ($scope,$location) {
$scope.n= $scope.n || 0;
console.log("at the begining n is "+ $scope.n);
$scope.click = function click() {
$scope.n++;
console.log("n after++ is " + $scope.n);
$location.url("/second");
}
});
Here i increment n variable and change URL to /second. In my $routeProvider i indicated that route with this URL must have loading controller as well. After triggering of the button it disappears because /second router have no template. I press button on main view again, my loading controller is executed once more, but the n variable is still 0. Why the value of n is not 1?
I know that my explanation is confusing, but i have the code in plunker
You're instantiating a new controller that has a new scope (and thus a new variable n). You need to keep the iteration data in something more persistant, like a parent scope, service, localStorage, etc (depends what you need the data for).
Here's a working example using $rootScope, just so you can see (you should probably use something other than the $rootScope in your final code): http://plnkr.co/edit/HETROBPwa6VyjX83Eev0?p=preview
I added a simple console.log('scope', $scope); in the controller, so you can see that each time you change the url, a new scope is created.
Related
I have a function which uses papaparse.js to immediately get the content of a .csv file selected via a file input as a JSON object list, I then pass this list to a $scope which I console.log.
This is triggered on a button click and works, the issue is the view can't immediately see this $scope has been updated until another action happens, such as clicking the button again, or clicking another button which calls an empty $scope function.
HTML View:
<div ng-controller="myController">
<input id="csvfile" type="file" accept=".csv">
<button type="button" ng-click="readDataList()">
Preview Data
</button>
{{dataList}}
</div>
And the .js is
var App = angular.module('App', ["ui.bootstrap"]);
App.controller('myController', function ($scope, $http) {
$scope.dataList;
$scope.readDataList = function ()
{
var myfile = $("#csvfile")[0].files[0];
var json = Papa.parse(myfile,
{
header: true,
skipEmptyLines: true,
complete: function (results)
{
$scope.dataList = results.data;
console.log($scope.dataList);
}
});
};
});
The list is in the console as soon as the button is clicked, but won't appear in the view unless I clikc the button again.
If I add into the contoller the following:
$scope.testScope = 'hello';
$scope.changeScope = function () {
$scope.testScope = 'goodbye';
}
and in the view have the new $scope displayed and the function on a new ng-click this works immediately displaying the new value as soon as the button is clicked. But it doesn't work for the data from the csv even though it appears in console.
Try $scope.$apply(); after the line $scope.dataList = results.data;
Your Papa.parse function is out of the scope of angular, due to which any changes done in its callback are not captured by angular. So you have to manually trigger the new digest cycle with $scope.$apply() function so that angular checks if anything has changed in its scope and updates the view.
Read this for more detailed information http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
I could able to resolve the issue by using $rootScope, I have used $rootScope and the value is automatically updating the view (HTML template).
Controller:
$rootScope.myVariable = 'update label'
Now, if you update the value of myVariable via any click/change events the updated value will be updated in the HTML template.
HTML file:
<h3>{{myVariable}}</h3>
I have a navbar directive which sits above ng-view. It utilises the $rootScope to trigger events to show buttons in certain views.
I am trying to add a button to the directive template which will switch a boolean in a controller for a particular view. The view shows a period of time and each period has a particular boolean that I want to switch from the directive.
The boolean value is saved in a local storage object which is initialized when each iteration of this particular view is loaded.
First, the value needs to be communicated to the directive so the button can display as being set to true or false. When the switch is toggled, the value of that boolean needs to make its way from the directive, through the $rootScope, to the controller and then be saved in the storage object.
When the view is changed, the whole process needs to repeat. The switch needs to be able to be switched on and off multiple times, obviously.
At present, I am emitting the value from the controller to the $rootScope and then listening for that value in the directive link function.
However, what is the best way to get that $rootScope value BACK into the controller. I tried setting up a $rootScope.$watch in the controller which appeared to work on any single page but when navigating between different time periods, the $rootScope value of the boolean was not resetting properly.
I tried resetting the value in the controller initialization as follows:
$rootScope.booleanValue = false;
but this didn't work.
I have also tried the following:
$scope.$on('$routeChangeSuccess', function (next, current) {
$rootScope.booleanValue = false;
});
but I can't get the whole cycle to work properly. It still seems as though the value of the property in the $rootScope is not resetting from the view before and is then carrying over when an adjacent pay period view is loaded.
I hope this makes sense. I will save you from too much code as I think the basic idea is here.
What you are trying to do is share state from your navbar directive (an isolate scope) and your view's controller. I recommend you use a factory provider service to share that state:
angular.module('myApp').factory('navbarState', function (){
return {started: false}
});
In your navbar directive, inject the service and store the state in that service:
angular.module('myApp').directive('navigationBar', [
'$rootScope',
'navbarState',
//'NavigationStackService',
//'NavigationBarService',
function ($rootScope, navbarState) {
function link(scope, element) {
scope.startEditMode = function(){
console.log("Edit clicked");
navbarState.started=true;
//NavigationBarService.hideNavigationEdit();
//NavigationBarService.showNavigationDone();
};
scope.finishEditMode = function(){
console.log("Done clicked");
navbarState.started=false;
//NavigationBarService.hideNavigationDone();
//NavigationBarService.showNavigationEdit();
};
}
return {
templateUrl: 'templates/navigation-bar.html',
restrict: 'E',
scope: {},
link: link
};
}
]);
In your view controller, retrieve the service, put it on the controller's scope, and use it in your template.
angular.module('myApp').controller('controller2', function(navbarState) {
console.log("view controller2 started");
var vm = this;
vm.navState = navbarState;
vm.message = "hello from ct2";
});
The DEMO on JSFiddle.
I have a main page with a nav, and each nav option takes you to another route. It all looks like a single page app, but each "page" has it's own route and controller.
My problem is that I want to put a search box in the navbar. When someone uses the searchbox, I want to take the user to the "search" route and then display the results. I'm having a lot of trouble figuring out these two issues:
Where do I store this "searchbox" logic? E.g. when someone searches, they choose the type of search from a dropdown, then the search query in the inputbox. I have special logic to automatically choose which dropdown value based on the value typed in the inputbox.
How do I redirect to the
"search" route and display the results based on the input from the
previous page?
It's probably clear I'm a newby to Angular. I'm happy to work out the details, but I'm mainly looking to understand how to structure the solution to this problem. Thanks in advance for your help.
What I love about Angular the most is the amount of options you can apply.
Your goal can be reached either by using a service. A service is a singleton class which you can request from controllers. Being a singleton what ever value you store in the service is available to all controllers. You can than either $watch for value change, use $broadcast to notify data change or use $routeParams to send data with route change.
A service is built as follows :
The following assume you have a global module var named 'app'
app.service('myService', function(){
var myValue;
this.getMyValue = function(){
return myValue;
};
this.setMyValue = function(value){
myValue = value;
};
});
Then you request a service from a controller like you request an angular service such as $scope.
app.controller('myController', ['$scope', 'myServce', function($scope, myService){
$scope.myValue = myService.getMyValue();
//Example watch
$scope.$watch('myValue',function(){
//Search criteria changed!!
}, true);
}]);
Angular is terrific..have fun coding
Basically you would want an own state for your search page, so this is where we begin (I expect you to use the ui-router and not Angulars built in router):
.state('search', {
url: "/search",
templateUrl: "pages/search.html",
controller: 'SearchController as ctrl',
params: { searchString: {} }
})
As you can see, I've defined an additional parameter for the search string that is not part of the URL. Of course, if you like, you could change that and move the parameter to the URL instead:
.state('search', {
url: "/search/:searchString",
templateUrl: "pages/search.html",
controller: 'SearchController as ctrl'
})
The actual search input is pretty straight forward as well, because it's only HTML:
<input type="text" ng-model="searchString" on-key-enter="ctrl.goSearch(searchString)">
The function for the state change has to be placed in the controller for the primary template (e.g. the controller of your navigation bar if the search is located there):
var vm = this;
vm.goSearch = goSearch;
function goSearch(searchString) {
$state.go('main.search', { searchString: searchString });
}
Of interest is also the on-key-enter directive that I've added:
angular.module('your.module')
.directive('onKeyEnter', OnKeyEnter);
function OnKeyEnter() {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.onKeyEnter);
});
event.preventDefault();
}
});
};
}
On pressing the enter-key, it will call the function you supply as attribute value. Of course you could also use a button with ng-click instead of this directive, but I think it simply looks better.
Last, but not least, you need a Search Controller and a HTML template for your search page, which I won't give to you, as it is up to you what you display here. For the controller, you only need to know how you can access the search string:
angular.module('your.module')
.controller('SearchController', SearchController);
SearchController.$inject = ['$scope', '$stateParams'];
function SearchController($scope, $stateParams) {
$scope.searchString = $stateParams.searchString;
/* DO THE SEARCH LOGIC, e.g. database lookup */
}
Hope this helps to find the proper way. :)
I have a check box that I need to keep checked after navigating away from the page. I am using AngularJS and bootstrap. Right now I am resetting the bound variable to false every time I reload the page (when the controller runs): how can I store my most up to date variable ($scope.disableCheck)?
In my controller....
$scope.disableCheck = false;
$scope.removeCheck = function () {
$scope.disableCheck = !$scope.disableCheck;
}
And in my HTML...
<input class="notification-checkbox" type="checkbox" value="{{disableCheck}}" ng-click="removeCheck()" ng-clicked="{{disableCheck}}">
Try using $rootScope instead. It is global to all controllers
Something like this
.controller('someCtrl', function($scope, $rootScope) {
$rootScope.disableCheck = true;//set root scope here and refer to it as needed from other controlers
})
I have scenario where I want to send a broadcast event in one controller and have the controller for a directive receive the message. The event is sent immediately on controller startup, and the issue is that because the directive is loading the view using templateUrl, it happens asynchronously, so the event is broadcast before the directive controller is intialised. This problem doesn't happen if the view is in the main page body, but I guess there could still be an issue with controller initialisation order.
I am using the following code in my main controller:
$rootScope.$broadcast("event:myevent");
I have reproduced the issue here: http://jsfiddle.net/jugglingcats/7Wf8N.
You can see in the Javascript console that the main controller is initialised before the controller for the directive, and it never sees the event.
So my question is whether there is a way to wait until all controllers are initialised before broadcasting an event?
Many thanks
I have created a working version. I actually feel that it is a very unclean way to do it, but I could not come up with something better: http://jsfiddle.net/7Wf8N/3/
What I did is this: In the directive I added some code which will increase a counter in $rootScope upon initialization. I use a counter because as you said, you want to wait for more than one controller:
$rootScope.initialized = ( $rootScope.initialized||0 ) +1;
In the "RegularCtrl" I added a watch on this counter and if the counter reaches the correct value (everything is initialized) I send the event:
$rootScope.$watch('initialized', function() {
if ( $rootScope.initialized == 1 ) {
$rootScope.$broadcast("event:myevent");
}
});
Are you ng-view? If so, you have the $viewContentLoaded event available. This will fire after all the dom is loaded.
http://docs.angularjs.org/api/ngRoute.directive:ngView
function MyCtrl($scope, $rootScope) {
$scope.$on('$viewContentLoaded', function() {
$rootScope.$broadcast('event:myevent');
});
}
If you aren't using ng-view, you could just set a variable and use data-binding to your directive.