This is my html
<div controller="parent">
<button ng-click="doSomething()"><Click</button>
<div ng-view></div>
</div>
Here is my js controller for a particular view:
function child($scope) {
$scope.$parent.doSomething = function() {
// do http request or seomthing else
}
}
Now when Im on the child controller view, angular does http request when i click on the button on the parent scope but when I navigate to other views with different controllers (of course), angular still does http request when I click on the button on the parent scope.
I thought when the view changes, the controller and including its scope will be destroyed and thereby effectively removing references to that particular scope objects.
My work around is to listen for $scope.on('$destroy') and override the function to return empty or something else.
Is there a better way to do this?
Thanks
$scope.$parent.doSomething is adding the doSomething property to that parent $scope object. So long as that parent scope doesn't get destroyed, your click handler will stick around.
Related
I am trying to open an Angular accordian in the header.html by clicking a button which is in the body.html. Essentially triggering an event in one view from a completely different view. Does anyone have any idea how to do this in Angular?
What you can do is using events to let your accordion directive know that something happend or use a shared service. Considering the performance, it does not make a huge difference, but only if you use $emit instead of $broadcast since the event fired via $emit bubbles up your scope hierarchy and $broadcast sends the event down. Also make sure to fire the event on the $rootScope, so it won't event bubble up anymore.
So you in case you want to use events for you could have a method on your component that fires the event via $emit on the $rootScope as follows:
function openAccordion() {
$rootScope.$emit('on-accordion-open', null);
}
You could then use this in your view, e.g. in body.html. Remember that function above is part of another directive / component or controller.
<button ng-click="vm.openAccordion()">Open Accordion</button>
Also note that I assume you are using controllerAs syntax (set to vm).
In your accordion directive you can then hook up listeners to several events for example the on-accordion-open:
$rootScope.$on('on-accordion-open', function() {
// Open the accordion
});
The other soltuion is to use a shared service. In this case I would create a AccordionServce that is aware of all instances of accordions. The service could look like this:
angular.module('myApp').service('AccordionService', function() {
var accordions = {};
this.addAccordion = function(name, accordion) {
accordions[name] = accordion;
};
this.removeAccordion = function(name) {
delete accordions[name];
};
this.getAccordion = function(name) {
return accordions[name];
};
});
In your accordion's controller you then add the accordion to the AccordionService via
accordionService.addAccordion('myAccordion', this);
The this in the snippet above is refering to the accordion controller. Thats important because if you then get an accordion in your component in the body.html, you'll get the controller instance and can call methods like open.
So in your body component you can then inject the AccordionService and get the accordion to call a method:
accordionService.getAccordion('myAccordion').open();
Make sure to define open on the accordion's controller.
I am trying to show one button as in this Plunker
<div ng-show="showbtn"><button class="fix btn btn-success" ng-click="top()">To the top</button></div>
On scroll event, I have made $rootScope.$emit call and it is getting triggered too, but not sure why the $scope value is not getting changed inside the mainCtrl controller $scope. Is $scope inside $rootScope is different ?
The event handler (the function passed to $rootScope.$on) runs outside of Angular's normal digest cycle so you need to tell the parent scope that something has changed. You can use $apply to do so:
$rootScope.$on('scrolled',function(event,data){
$scope.$apply(function () {
$scope.showbtn = data.message;
});
});
Here's an updated Plunker.
I would like to pass a variable from the view scope ($scope.sort) into the popover scope.
Once set in the popover, the variable 'goes out' of it with no issue though, with code below in$scope.closeSortPopover`.
I thought the popover scope was the same as the scope of the controller it comes from.
But it seems it's not the case.
Where is the popover scope ?
If I understand correctly from here the popover scope is a child of the controller scope. So how can I access it... ?
FYI my popover is a list of <ion-radio>s offering different sorting opions for the big list in my main view.
html:
<button ng-click="openSortPopover($event, sort)">
controllers.js
$ionicPopover.fromTemplateUrl('templates/computeSortPopover.html', {
scope: $scope
}).then(function(popover) {
$scope.sortPopover = popover;
});
$scope.openSortPopover = function($event, sort) {
$scope.sortPopover.show($event);
};
$scope.closeSortPopover = function(sort) {
$scope.sortPopover.hide();
$scope.sort = sort;
};
In the controller js, you are assigning the scope of the controller to the scope of the popover. Thus all the methods in the controller scope are accessible via the popover view. In other words, both the controller view and popover view share the same scope.
In fact you might think this a violation of mvc as one controller cannot own two views, but with angular, you actually can't otherwise.
To create isolated scope, your only option is directives.
I discovered that due to javascript inheritence, the scope variable must be contained into an object to be passed to inherited scopes.
So instead of this:
$scope.sort = ....
I declared this in my controller:
$scope.data={};
$scope.data.sort = ....
and used in my html (both in the initial view and in the popover templates):
data.sort
Documented here apparently: https://github.com/angular/angular.js/wiki/Understanding-Scopes#javascript-prototypal-inheritance
http://plnkr.co/edit/UfQJU661pQR0DMY3c61t?p=preview
I got above code from AngularJs site and only thing I have added a button to delete a Div where we have controller but after delete no destroy method called as I have put alert in Directive and Controller.
element.on('$destroy', function() {
alert('destroy directive interval');
$interval.cancel(stopTime);
});
and
$scope.$on('$destroy', function() {
alert('destroy controller interval');
// Make sure that the interval is destroyed too
$scope.stopFight();
});
please suggest.
Thanks
The main thing to be noticed
When element.remove() is executed that element and all of its children will be removed from the DOM together will all event handlers attached via for example element.on.
It will not destroy the $scope associated with the element.
So you need to manually trigger scope.$destroy();
First get the scope of element:-
var scope = angular.element(document.getElementById("mainDiv")).scope();
Second remove the element from dom:-
$('#mainDiv').remove();
Third destroy scope manually:-
scope.$destroy();
Plunker
You're doing it outside of angular's context.
<button id="btn" onclick="DeleteMainDiv()">DeleteDiv</button>
So in your DeleteMainDiv() function
function DeleteMainDiv() {
alert('Controller div going to remove');
//debugger;
var scope = angular.element(document.getElementById("mainDiv")).scope();
$('#mainDiv').remove();
scope.$destroy();
}
This will trigger the destroy functionality.
But I don't see a need of it. Angular will automatically run the $destroy event handler when the route changes or directive no longer required.
DEMO
I have a controller that is the controller for my page but i was wondering if its possible to have a AppLevel controller i.e. something that is accessible from every page... so each page would actually have more than 1 controller assigned.
I know i can probably do this with a service and inject the service but I was hoping for some kind of applevel controller that can be assigned.
If this possible, how would i communicate between the 2? I presume using dependency injection and just pass the applevel controller to my main page?
Anyone have an idea about this?
thanks
AngularJS leverages JavaScript prototypical inheritance in order for scopes to access properties on the parent scope. You can define the controllers nested in the HTML and access the parent from the child. However I would strongly urge you not to rely on this fact for your 'AppCtrl'. In some cases the scope you are working on will be isolated and will not be a part of the inheritance hierarchy that has access to the AppCtrl's scope.
I would suggest creating a service for this, or you could use pub/sub with $rootScope.$on and $rootScope.$broadcast.
To show the service example I'll use the words shellCtrl and shell service instead of app to make the example a little clearer.
The 'shell' service's job is to allow any other controller, directive or service in your app to interact with the shellController, and therefore the host view container.
<div ng-app="myApp" ng-controller="ShellCtrl">
<div ng-controller="SomeOtherCtrl"></div>
</div>
// parent controller defined on the same element as ng-app
function ShellCtrl($scope, shell) {
// I've just made the shell accessible to the $scope of shellctrl, but you can do
// this in various ways.
$scope.shell = shell;
}
// any other controller
function SomeOtherCtrl($scope, shell) {
shell.setTitle('Some title');
}
// basic example of the shell service
angular.module('myApp').factory('shell', function () {
return {
title = 'No title set',
setTitle = function (title) {
this.title = title;
}
}
});
Now you can set properties on the parent controller in a detached fashion without relying on the scope hierarchy.
When you have a child controller in Angular it inherits from the parent scope. So if you have one top level controller that contains functions that some descendant controller doesn't have then the top level function (or scope object) will be referenced. If one of the child controllers defines a local version of the function (or property on the scope) then it will no longer inherit from it's parent controller.
The Fiddle: http://jsfiddle.net/Y9yEQ/
The HTML
<div ng-app="myApp" ng-controller="TopLevelCtrl">
<button ng-click="testing()">Yo top level!</button>
<button ng-click="testing2()">Yo top level 2!</button>
<div ng-controller="ChildCtrl">
<button ng-click="testing()">Yo child!</button>
<button ng-click="testing2()">Yo child2!</button>
</div>
</div>
The JS
angular.module("myApp",[]).controller("TopLevelCtrl", function($scope){
$scope.testing = function() {
alert("just testing");
}
$scope.testing2 = function() {
alert("just testing parent");
}
}).controller("ChildCtrl", function($scope){
$scope.testing2 = function() {
alert("just testing child");
}
})
If you need to share some data between multiple controllers (since controller instances may be created or destroyed to support views as they are added/removed) you'll want to use a service. If you have a strict structure for your controllers you can $emit to bubble an event up scopes or $broadcast to send events down through scopes.