uXs posted:

Angular (1.4) question:

Say I have a page with a menu on top and content below. They each have their own controller. (Not nested.)

Sometimes the content is a form where users can edit some things. The 'save changes' button for this should appear in the menu bar. Said button should somehow call the save() method of the content controller. Any ideas on how best to do this?

I tried it with broadcast but couldn't get it work yet. (Because I was operating under the assumption that the content controller was nested in the menu controller.) But even if/when I get that to work, I feel that broadcasting/and or emitting events isn't the best way to achieve this anyway.

Would using some kind of service be a good idea? The service would be injected in both menu and content controller, and the menu controller would call poo poo on the service and the content controller can react to it. Or is that stupid? Or is the entire setup stupid?

uXs posted:

I did it with this:

First block of code is a service where things that are interested in the save clicks can register their callbacks.

Second is the controller with the save() function, that registers a callback to it with the service. (And removes it on destroy.)

And third is where I define the directive. I can use it by putting 'on-save-click=""' on a hyperlink tag.

I like it, it looks clean.

Skandranon posted:

This is basically #2, except you wrote your own version of AmplifyJS, that only handles one type of event. If you plan to scale beyond this one use case, I'd suggest using Amplify, and use your Angular service to wrap around it.

Also, use BindToController & ControllerAs in your directives, and don't use $scope anymore for your functions or variables, will make things even cleaner.

Heisenberg1276 posted:

I already use SCSS. I was thinking more in the way the CSS is structured. CSS Modules looks like the right sort of thing! thanks

an skeleton posted:

I have an angularjs directive that has some scope functions and some parser/formatter functions. It seems the ctrl (4th parameter of the linking function) object is different in the scoped functions than in the parser functions. what gives? here's a rough example

code:

link function(a, b, c,  ctrl){

 scope.blarg = function(){
   console.log(ctrl[0]);
 }

 modelCtrl.$parser.unshift(function(){
  console.log(ctrl[0]); //value will be different
 });

}

WORLDS BEST BABY posted:

ReactEurope are streaming their conference, if that interests you. There'll probably be a few interesting updates on new projects (crossing my fingers for Relay) on top of everything else:

https://www.youtube.com/watch?v=UclvvqNtNNo

Helicity posted:

I thought I was finally up to speed on front end development, but I just found a ton of newer stuff this week that I'm not familiar with. Anyone care to chime in on their thoughts and usage of these two things?

1) Polymer/Web Components - Polymer seems like just some polyfills for compartmentalized stuff so you can easily re-use common ones, and you get the isolation that only iframes currently provide. These sound great, but browser support seems to be lacking and doesn't appear to be converging towards an accepted standard.

quote:

2) Function reactive programming/ClojureScript/Om/Rxjs/etc - Observables and Clojure and a bunch of things I don't understand at all. Why would you want to compile Clojure down to Javascript?

quote:

Why is MVC horrible and reactive programming something more than hype?

Helicity posted:

Our main solution has 87 projects

AuxPriest posted:

Jesus christ.

piratepilates posted:

Thermopyle posted:

Videos from the ReactEurope conference will start being posted tonight here.

quote:

Also, I just wanted to highlight this amazing issue raised on the reddit issue tracker: https://github.com/reddit/reddit-mobile/issues/247

piratepilates posted:

Does anyone know if there's a way in Babel or Webpack (or babel-loader for Webpack) to define imports in terms of a project root instead of having tons of '../../../fart/butt' import definitions everywhere?

I looked through the Babel options but nothing is too helpful since the promising ones only have one vague line telling you what it does.

substitute posted:

Try ctrl/cmd + e, instead of tab.

Parrotine posted:

Hrm, that's not doing anything either : (

This really is puzzling! It's bizarre, every other shortcut works just fine, it's only the "!" character that does nothing, both using TAB and with the above method.

gariig posted:

I need some Angular help because I don't know what I'm doing. A couple of developers started using Angular and I was tasked with fixing a bunch of the bugs. One page has a left hand side panel with a list of master-child items (say Foos with a list of Bars attached). When you click on a bar the UI on the right will show more information and the selection is saved in $scope.bar. There's an edit button, when clicked will show a modal edit form using an ng-click attribute that calls a showEditBar on the Controller passing vm.$scope.bar into it. The function sets a variable for the object being edited ($scope.barToEdit) and sets a boolean to show the modal edit window. Hit the save button which calls a function on the Controller (updateBar) and passes in barToEdit which calls Put on a Service that returns a Promise using $q to wrap the $http promise. Inside the Then I'm trying to set the data from the JSON API to $scope.bar, things aren't quite right. The slide out panel has the updated information but the list on the left hand side isn't updated. If I use angular.extend($scope.bar, data) that updates everything correctly.

I understand why angular.extend is working because the function is copying all of the data over, but I don't understand why direct assignment isn't. Is it because Angular doesn't know anything about the new object?

gariig posted:

OK the different type of $watch is definitely what's getting me. Here is some of the code that is being used, I think this is everything that is needed. So the ng-repeat is using a Collection Watch but I'm modifying an individual item which it's not seeing on the master-detail listing side. The more details panel on the right is using a Reference Watch so that's why the angular.extend() is working.

As a dirty fix is attaching a By Value watch to $scope.Foos a valid fix? Should I try finding the Bar I editing in the array of Bars and replace with the new one? I don't think that would allow the slide out panel to update. I guess I could change both the Bars array and the BarToMod with the new item. Would that be the most Angular way to fix this?

Display of master-detail records

code:

Skandranon posted:

Using a ByValue $watch is very expensive, not usually a good way to go. You also want to avoid creating completely new Bar objects, as this will force Angular to create/destroy whole new DOM elements which is probably not necessary. If I am reading your code right, your problem is not updating from within your this.BarService.put(Bar).then() promise. You could wrap that chunk of code in a $scope.apply(), which will make sure to call a $digest on $rootScope once the code contained within runs. This is preferable to using a Value watch, as the digest only happens after a specific change takes place, instead of the Value watch checking every field every $digest.

code:

(data) => {
            this.$scope.$apply(() => {
		var tempBar = new Models.BarItem(data);            
	        self.$scope.Bar = tempBar;
        	this.$scope.showBarForm = false;
	        self.$scope.successMessage = "Successsfully updated Bar - " + Bar.name;
            });
        }

Also, it looks like you are using TypeScript, I would suggest trying to use bindToController and controllerAs in your directives and avoid using $scope altogether. Your Controller classes will effectively store your variables & functions directly, making it a lot easier to manage them.

JS Error posted:

[$rootScope:inprog] $digest already in progress

an skeleton posted:

Thanks for the answer earlier, Skandranon. I typed out a longish reply to you but somehow it got lost in the Aether. Nonetheless, your advice was helpful.

I have another angular issue though -- I have a field (Angular UI Datepicker) that is always being marked as ng-invalid-required, in other words it is failing the required validation, gaining both "ng-invalid" and "ng-invalid-required" classes and messing up validation for the page, which involves submission being disabled if any field is invalid.

If I remove the ng-required attribute, the field validates just fine. All the other datepickers (there are a lot in the app), required or not, work fine, except a small subsection of them in this page.

my bony fealty posted:

He wants me to mock up a more modern version that's easier to use and fully responsive. [...] I'm leaning towards Angular, as it seems to have robust form validation built in and two-way data binding seems enormously useful for forms.

my bony fealty posted:

I've been asked by a coworker to take a look at an online application form our clients use that is rather user unfriendly and apparently has a high rate of abandonment before completion. It's written in vanilla JS and is spread across several pages. He wants me to mock up a more modern version that's easier to use and fully responsive. I was going to just make something simple with JS and a better design, but I want to try using one of the more modern frameworks. Since I'm doing this as a favor and not writing anything that will actually be deployed to the wild, I'm not worried about having production-quality code in the first version.

Any recommendations for the best tool here? I'm leaning towards Angular, as it seems to have robust form validation built in and two-way data binding seems enormously useful for forms.

kloa posted:

I may need to hit up the JS thread, but would d3js be the easiest/fastest way to visually display backend data?

We typically use Tableau/ReportingServices with SQL Server/cubes, but I'd like to delve more into the webapp/front-end side and learn something new.