These are chat archives for angular/angular.js

30th
Apr 2015
Jeff Whelpley
@jeffwhelpley
Apr 30 2015 09:26
Brian Ford gave a talk at the Boston Angular Meetup last night on the ComponentRouter (new name for the new router in 1.4/1.5/2.0): https://www.youtube.com/watch?v=sfV0ApyN5fM
Tim Jacobi
@timjacobi
Apr 30 2015 12:54
This message was deleted
Mike Haas
@mikehaas763
Apr 30 2015 13:43
If I run karma start, isn't it supposed to do a test run once the server starts?
Mike Haas
@mikehaas763
Apr 30 2015 13:51
Well, It turns out the autoWatch karma config property is what determines whether karma start will do an initial test run. I didn't realize that. It's been wayyy to long since I've used karma.
Neel
@neelneelneel
Apr 30 2015 14:22
Hi, I finally need to start testing my angular app. Any helpful tutorials or videos that you would recommend?
Brad Wertman
@bmwertman
Apr 30 2015 16:56

I have a state in my ui-router app.manage. I specify a controller: 'ManageCtrl' in that parent state.

The parent state has three child views. One of which week: {templateUrl:'manage/templates/week.html' operates under a different controller , CalendarController

I've created a factory weekDatesService and injected it into my CalendarController

and set a resolve: { dates: function (weekDatesService) { return weekDatesService.getWeek(); } on the parent app.manage state.

and then I inject dates, which my factory should return, in my ManageCtrl.

I keep getting an error in my console Error: [$injector:unpr] Unknown provider: weekDatesService

I've done this before between top level parent views without problems but I'm not sure what I'm missing doing it with child views within a state.

Kyle Bradshaw
@kylebradshaw
Apr 30 2015 18:26
Hi, I have a quick question. what is the best way to automatically select the first value when using ng-options in a <select>? tried a couple things from SO but didn't end up working for me. I'm on 1.3.15
Mike Haas
@mikehaas763
Apr 30 2015 18:29
@kylebradshaw Maybe using ng-model set the initial value for the select to be bound to?
Kyle Bradshaw
@kylebradshaw
Apr 30 2015 18:31
I've tried this approach
    <select id="behaviors"
        ng-model="selectedBehaviors"
        ng-change="selectBehaviorAction()"
        ng-options="value.behavior for value in data | orderBy:'behavior'"
        ng-init="selectedBehaviors = data[0].value"
        >
    </select>
but the ng-init isn't working in this case
Mike Haas
@mikehaas763
Apr 30 2015 18:34
I don't use ng-init because it's a bad practice in real world apps so I can't be sure but I'm guessing when the ng app bootstraps and the ng-init is evaluated once, that the data array does not yet exist.
@kylebradshaw I just found this post that explains it a bit better http://stackoverflow.com/a/27909326/1454406
Kyle Bradshaw
@kylebradshaw
Apr 30 2015 18:37
@mikehaas763 awesome this is a great approach, thanks a lot!
Matt Prestlien
@mattchue
Apr 30 2015 19:30
Hello! Quick question - as I'm scaling my app up, I want to separate out my controllers into their own .js files. It seems like unless i use something like gulp-concat then my only option is to include every individual controller in a <script> tag in my index.html. For large apps, this could mean you have hundreds of potential script includes. Am I missing something here?
Mike Haas
@mikehaas763
Apr 30 2015 19:38
@mattchue There are three options that I can think of. 1 use a module system that takes care of loading the individual script files. 2 concat everything into a bundle as you mentioned. You still need to make sure you load things in the right order though. For example, make sure you order your angular.module('mod', []) defines before angular.module('mod) reads. 3 use a tool like gulp-linker to help automate the insertion of script tags. You still have to make sure you load your module defines before the reads.
Matt Prestlien
@mattchue
Apr 30 2015 19:57
@mikehaas763 that helps a ton. the only module loader that i'm aware of is AngularAMD, which still required individual script declarations, just via javascript instead of html. additionally, i know gulp-concat can sweep through folders and find script files so you don't have to try and define them all yourself. I will definitely check out linker as well. Thanks!
Mike Haas
@mikehaas763
Apr 30 2015 19:59
@mattchue I wouldn't use that AngularAMD package personally. I believe the point of that is to allow lazy loading of modules. I mean a module system as in RequireJS, browserify, webpack, or native ES6 modules transpiled and loaded using SystemJS.

Yes using something like gulp-concat or gulp-linker automatically finds files but you have to tweak something generally so that the files that define your angular modules are loaded before other files that add things such as controllers or directives to the angular modules.

For example

//file1.js
angular.module('myMod', []);

//file2.js
angular.module('myMod').controller('myController', MyControllerConstructor);
Brad Wertman
@bmwertman
Apr 30 2015 20:03
I'm using $scope.$on to listen for an event object. I'm able to console.log() the data I need inside the $scope.$on callback function. But if I return data outside the callback and try to console.log there it's undefined. Can someone explain?
Mike Haas
@mikehaas763
Apr 30 2015 20:03
One thing I've done on past teams is made the files that defined the modules named 00-module.js etc. The gulp.src, gulp-concat etc loads them in the correct order just based on the file name. There are other ways you could automate this though.
@bmwertman Can you make a small snippet or gist or something for an example?
Brad Wertman
@bmwertman
Apr 30 2015 20:05
@mikehaas763 Yes, one sec.
Mike Haas
@mikehaas763
Apr 30 2015 20:17
@bmwertman so I'm guessing you're saying you can console.log(datesInView) when you're inside the $scope.$on callback?
Brad Wertman
@bmwertman
Apr 30 2015 20:17
@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
Apr 30 2015 20:19
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
Apr 30 2015 20:28
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
Apr 30 2015 20:30
No, because console.log() will have already ran before your newDates event has fires the function that puts the data there.
Brad Wertman
@bmwertman
Apr 30 2015 20:33
So anything I want to do with datesInView has to be done inside the $scope.$on callback?
Mike Haas
@mikehaas763
Apr 30 2015 20:34
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
Apr 30 2015 20:51
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
Apr 30 2015 20:56
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
Apr 30 2015 21:05
Thanks for your help @mikehaas763
Darrin Dickey
@darrindickey
Apr 30 2015 21:51

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
Apr 30 2015 22:07
@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
Apr 30 2015 22:08
It may be from me converting it on the fly from Jade.
But how do I pass locationId out of the directive?
Jared
@jareddr
Apr 30 2015 22:09
it depends on where you’re trying to send it to
Darrin Dickey
@darrindickey
Apr 30 2015 22:09
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
Apr 30 2015 22:10
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
Apr 30 2015 22:11
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
Apr 30 2015 22:13
then i think your html should look more like this
Darrin Dickey
@darrindickey
Apr 30 2015 22:13
Was passing through the directive element in the view via changed='updateMap(locationId)'
Jared
@jareddr
Apr 30 2015 22:13
<map-list changed=‘locationId’></map-list>
Darrin Dickey
@darrindickey
Apr 30 2015 22:14
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
Apr 30 2015 22:14
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
Apr 30 2015 22:20
I'll give it a shot. Thanks!
Darrin Dickey
@darrindickey
Apr 30 2015 23:23
Tried it, but it still doesn't pass locationId out of the directive.
Jared
@jareddr
Apr 30 2015 23:23
your goal should be first just to get that updateMap function in the controller being called
if you can get it called in any form, passing the locationId should be easy
a plunkr is worth a thousand chats
Darrin Dickey
@darrindickey
Apr 30 2015 23:44
I'll look at the Plunkr now. I can call the controller function on click. I just can't pass the value from the directive.
Jared
@jareddr
Apr 30 2015 23:50
i see
Jared
@jareddr
Apr 30 2015 23:56
interesting, yeah I’m stumped when i try to call a function from the parent controller with a parameter. You can change the value directly in the controller with a two-way binding variable, but i’m not sure how to do that with a function