Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Mike Haas
@mikehaas763
@bmwertman Can you make a small snippet or gist or something for an example?
Brad Wertman
@bmwertman
@mikehaas763 Yes, one sec.
Brad Wertman
@bmwertman
Mike Haas
@mikehaas763
@bmwertman so I'm guessing you're saying you can console.log(datesInView) when you're inside the $scope.$on callback?
Brad Wertman
@bmwertman
@mikehaas763 , correct
But I need to be able to use the data returned in the callback outside $scope.$on in my ManageCtrl
Mike Haas
@mikehaas763
So what's happening is you're experiencing the asynchronous and closure nature of javascript. Inside this controller, you call two statements. $scope.$on() and console.log(). Those two statements get invoked synchronously one time when the controller is first instantiated... (I have more)
If you only want the data in the controller so that you can bind it to your view or something similar to that you would do something like
myModule.controller('ManageCtrl', function ($scope) {
    // always store your data in an object. Look up the angular 'dot' problem if you're not aware.
    $scope.dataObject = {};

    $scope.$on('newDates', function (dates) {
      var datesInView = dates.targetScope;

      // now using this in your view you could have {{ dataOject.datesInView }} etc
      $scope.dataObject.datesInView = datesInView;

      // what are you returning your data to here?
      return datesInView;
    });

    console.log(datesInView);// this is undefined
});
The anonymous function you pass to the $scope.$on is an event handler that is invoked asynchronously. Likely, after all the other code in your controller has already executed and is done.
Brad Wertman
@bmwertman
So doing this if I console.log($scope.dataObject) outside $scope.$on callback it should contain the data I'm after in my ManageCtrl? The return datesInView was my attempt to make the datesInView data available to other functions in the ManageCtrl.
Mike Haas
@mikehaas763
No, because console.log() will have already ran before your newDates event has fires the function that puts the data there.
Brad Wertman
@bmwertman
So anything I want to do with datesInView has to be done inside the $scope.$on callback?
Mike Haas
@mikehaas763
The short but not complete answer to that is yes. If you want to do some sort of work etc you should invoke some other code from the event handler (with good practice that code should be in a separate service that is injected).
What do you want to do with "datesInView"? I can maybe point you in the right direction.
A controller should be used to initiate anything you need done at first and to put things on the $scope that can be bound to from the view. Such as event handlers that listen to change events or just data objects that are used to show data on the view etc.
Brad Wertman
@bmwertman
In my view I have a week view calendar. When the user swipes left or right they see the dates for the previous or next week. The function feeding those dates is where I use $scope.$emit to push those from CalendarController to ManageCtrl. I need to query my database to check availability of some combination of two resources that the user can select for each of the seven dates returned and update the view to show whether both resources can be scheduled for the required time on those days.
Mike Haas
@mikehaas763
So with what you've got so far get the dates from the event. You can take those dates and pass it to another function or method that you call from the event handler.
Brad Wertman
@bmwertman
Thanks for your help @mikehaas763
Darrin Dickey
@darrindickey

I've got a directive that renders a Google Map. Inside of that directive, I'm trying to use the click function to pass a value to a controller. Ultimately, I want to replace the information inside of a div. In my directive, under Scope, I have: changed: '='.

In my HTML, I have :

<map-list>changed='updateMap(locationId)')</map-list>

In my Controller, I have:
$scope.updateMap = function() {
console.log('$scope.locationId');
};

I can't figure out how to pass locationId from the directive.

Jared
@jareddr
@darrindickey something looks funny with your html there, but if i'm reading it right, locationId will be passed into the updateMap function, would look like this $scope.udpateMap = function(locationId) { console.log(locationId) };
```$scope.updateMap = function(locationId) {
haha oh man i'm not good at gitter chat yet
Darrin Dickey
@darrindickey
It may be from me converting it on the fly from Jade.
But how do I pass locationId out of the directive?
Jared
@jareddr
it depends on where you’re trying to send it to
Darrin Dickey
@darrindickey
I tried scope.changed({ locationId: placeId }), but then I get "changed is not a function"
I want to send it to the controller.
Actually, ultimately I want to send it to the view.
Jared
@jareddr
ya i see, so you’ll define the updateMap function in your controller
and then you’ll send a map id intot your map directive
sorry i feel like i’m not being super helpful, i can’t totally see what your code is trying to do
Darrin Dickey
@darrindickey
In the directive, there is data that includes placeId (unique to each location).
I loaded that into the locationsId variable. And I'm trying to pass it to the controller.
I was using the scope changed: '=' to do two-way binding on the data.
Jared
@jareddr
then i think your html should look more like this
Darrin Dickey
@darrindickey
Was passing through the directive element in the view via changed='updateMap(locationId)'
Jared
@jareddr
<map-list changed=‘locationId’></map-list>
Darrin Dickey
@darrindickey
But that won't call the updateMap function in the controller.
Sorry, I think I'm being confusing. Let me try what you suggest and see what I get.
Jared
@jareddr
correct, so you want something in the directive to call a function in the controller i see
so yeah in your controller define an update map function
this goes in your controller: scope.updateMap = function(locationId) { console.log(locationId) }
then in your html do
<map-list updateMapFunction=‘updateMap’></maplist>
then in your directive you would do
scope: { updateMapFunction = ‘&’ }
then somewhere in your directive you’ll have to call that function you pass in
a button in your maplist could have <button ng-click=“updateMapFunction(1)”>
i haven’t tested that, so i’m not sure if it works, but its in the right direction
Darrin Dickey
@darrindickey
I'll give it a shot. Thanks!