i have a normal navbar with a menuController, this is the parent.
then i have two other controllers a DashBoardController this is loaded on startup and a LoadDataController this is called if i click a Link in my navbar.
it do the routing with the routeprovider like this:
$routeProvider.when('/', {templateUrl: 'partials/dashboard.html', controller: 'DashBoardController'})
$routeProvider.when('/loadData', {templateUrl: 'partials/loadData.html', controller: 'LoadDataController'})
in my LoadDataController i have a function for example doSomething();.. and if i click on a link in my navbar it routes me to the loadData site.. there it should call the doSomething() function. i want not use ng-init i want do this with an broadcast event! The problem is now, if i click on the Link in my navbar, it delegates me to the loadData.html site and sends a broadcast event, but at this moment the $on method in my LoadDataController is not initialized so the method is never called. How can i solve this problem ? is it possible that i can initialize my DashBoard an LoadDataController on startup?so that both controllers the DashBoard and my LoadDataController are initialized if i enter my index site?
EDIT:
#Dayan no i want not call a special function every time at initialization! my menucontroller is initalized at startup and is the parent controller. below this controller are two other controllers my DashBoard and my LoadDataController. In my Navbar i have different links that should call different functions in my LoadDataController. The problem is now, that the broadcast event did not reach the LoadDataController because at this moment the $on method is not initialized.. for example.. i have in my navbar a link that calls a function in my navbarcontroller like this:
$rootScope.$broadcast('callFunctionInLoadDataControllerEvent', null);
$location.path('/loadData');
and in my LoadDataController i have the $on method that shoud call a special function like this:
$scope.$on('callFunctionInLoadDataControllerEvent', function(scope, data) {
$scope.specialFunction();
}
the problem is now, i send my broadcast and at this time the LoadDataCOntroller is not initialized(and so the $on mehtod is also not initialized, the event never reaches my controller), the initizations starts first, if i change the path with $location.path('/loadData');
Related
I have a index.html page and this page is working as a single directive.
angular.module('app').directive('index', function() {
return {
templateUrl: 'html/index.html'
}
}).controller('index', ['$scope', '$http', function($scope, $http) {}])
Inside index.html, I have three tabs gallery, list and summary. I have put all these three tabs in different directive like this.
/*Gallery directive*/
angular.module('app').directive('gallery', function() {
return {
templateUrl: 'html/gallery.html'
}
})
/*List directive*/
angular.module('app').directive('list', function() {
return {
templateUrl: 'html/list.html'
}
})
angular.module('app').directive('summary', function() {
return {
templateUrl: 'html/summary.html'
}
})
I want that when I load the index.html page the gallery and the summary directive should also get loaded and visible in index.html. Also I am fetching some data in index.html on load, I also want to pass that data to summary,gallery and list directives. Also I have a gallery tab and list tab. When I click on the gallery tab I want the gallery directive to be loaded and when I click on the list tab I want the list directive to be loaded with the data. Initially the gallery and the summary directive should be there by default. The switching will only happen in gallery and the list view. The summary directive should be fixed there.
Initially I developed it all in a single directive. But now I am trying to make all these in a different directive.
Image below explain about my scenario
I am not sure, can we call multiple directive through single directive ? If yes then how can I achieve this ?
Regards
Create a factory holding the data that gets injected to the directive
Here its shown Sharing data between directives
This HTML button code is in controller:
On click of a button, trying to call this function:
<button ng-click="vm.openpopup()" ng-if="!vm.data.length"
uib-tooltip="Add Business Value Chain"
class="btn btn-default `enter code here`ti-form-action-btn" id="add-bvc-btn">
<em class="glyphicon glyphicon-plus-sign"></em>
Add
</button>
function openpopup() {
$scope.$broadcast('popup');
}
Below is the broadcast listener code which is inside component under the same controller mentioned above:
$scope.$on('popup', function () {
openModalPopup();
});
The button is displayed only when there is no data present.
Function call is absolutely fine, but broadcast works only once if there is data and if those data are deleted manually, then button gets displayed and broadcast works. But for on page load, if no data present. Broadcast not getting triggered.
Tried using $rootScope.broadcast, still no luck.
Also checking with some other answers, binded the block of code inside $timeout, still no results.
So this is a communication between controller and component using broadcast. How to handle this on load?
I think the issue in your case you have controlled the visibility of your button with ng-if, try it using ng-show instead of ng-if. In case of ng-if there is a chance that the template not to load. I hope that will solve your problem.
I have the following setup:
I have a header controller which controls the top navbar of the page. When entering a different route I want to change the nav layout. The problem I am having is that I can detect the route but only when the user refreshes the page.
Example:
<div data-ng-controller="HeaderController" >
...
<span>Product Name - {{layout}}</span>
...
</div>
My header controller:
angular.module('myApp.system').controller('HeaderController', ['$scope', 'Global', '$location', '$route', function ($scope, Global, $location, $route) {
...
$scope.layout = $location.path().includes('projectEditor');
...
}]);
When you select a button it opens a page with the route: projectEditor/1. But the span only updates when you refresh the page. My plan was to use a condition on the class but it only works when the user refreshes the page.
I'm using 1.5.5 version of angular.
How can I get that scope variable in my header controller to update on change of route anyone know ?
In order to know when the location change, you should use events :
https://docs.angularjs.org/api/ngRoute/service/$route#events
The solution Depends on the implementation you are using to route your application.
Here is an example with default angular router
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
$scope.layout = 'newRoute';
}
I hope it may helps
Ok I figured it out I needed to use $routeChangeStart and update a $routeScope variable and then attach to that.
Thanks all!
In angularjs when i click on button,then it will call function of Controller but in that function i am not able to get $scope or $rootScope.
Here is link :
https://plnkr.co/edit/rFDGLPMdvW4BeTBdu5s8?p=preview
when you click on Go To Store.. store page will open.. and click on Add to Cart.. then $scope function will call..but not getting $scope in that functionenter code here
You have a top-level controller called 'MainController'. The Store.html view uses this controller, but the AddToCart function is located in the StoreController. You need to add the Store controller to the store view (top line of store.html):
<div ng-controller="StoreController">
Updated plunkr
Your app is working fine and if you open Developer tools you will see that the debugger breakpoint is being hit. The issue that I found is that you don't have the route defined for Cart. Also the $scope.cartItemCount won't be auto-updated
My application has several 'modal' windows, For now there is no specific route to reach an open modal directly. I mean, written the url directly in the browser.
There are a Jquery solution, but how implement some similar solution for angular? where placed? when should run?
You can perform this sort of task within the routing config of your app.
For example, this one is using ui-router, for the routes, and ui-bootstrap for the modals.
In the route config add an onEnter which will fire when the route is first entered.
.state('login', {
onEnter: function ($stateParams, $state, $modal) {
$modal.open({
keyboard: false, // prevents escape-key closing modal
backdrop: 'static', // prevents closing modal outside of the modal
templateUrl: '/views/login', // view to load
controller: 'LoginCtrl' // controller to handle
})
}
})
Now, when navigating to the, in this example, login page the route will open the modal for me.