last day (23 days later) » 

4:38 PM
hi
 
Hey. Thanks for joining me. I appreciate it.
 
sure no problem
 
So, with the code you posted in response to my question, that's all well and good. But what I'm confused on is how the service interacts with the other controllers, and where the variables are housed.
 
so the problem you really have is trying to communicate between directives, inside of the tree structure / hierarchy that is Angular's scope's
the easiest way to communicate is that a parent talks to a child
this is easy in angular
siblings talking to each other, also easy
it becomes difficult when your solution is not straight up or straight down in a tree structure, but relational
so the questions is, look at the DOM
how do these directives you want to communicate relate to each other
 
<body ng-app="svs">
<svs-header>
</svs-header>
<alert-box>
</alert-box>
<div id="main-wrapper">
<div class="container">
<div class="row row-centered">
<div class="col-xs-10 col-centered">
<div ng-view></div>
</div>
</div>
</div>
</div>
<svs-footer>
</svs-footer>
<script src="resources/js/all.js"></script>
</body>
 
4:42 PM
when you're tough out of luck and you have no clue, rootScope.$broadcast and scope.$on is the simplest way to reason
you broadcast the message from all the way to top, the root
and trickle down to everything below it
that's the easiest way
it will hit everything, everywhere
now the question is, is this a bad solution?
 
I would like to avoid abusing the rootScope if at all possible. I would like to stick with the modular type style that Angular is intended to be.
If you take a look at that HTML, you can see my alert box directive.
 
if you are familiar with pub/sub, you could abstract this away into a generic service, that can be instantiated
 
Inside three layers of Bootstrap containers is the ng-view directive.
That's where the other controllers reside.
 
ok let me take a quick look
 
I'm not at all familiar with pub/sub. I'm primarily a back-end MVC dev.
 
4:43 PM
ok, so let me give you another example, that might help you understand how to reason with this
a very common use-case, that is similar to this, is that we have a form. we have the form container, and the form contains many fields, and each field has an error message box
now the way to communicate, would be to have some logic on the form itself, to trigger its fields, and with that, also trigger those error message or alert boxes
so you have an orchestrating parent
which also has a logical connection, its a form, and the fields are generic
so you talk to the form, which then talks to the field
so lets ignore all this, you want a service that does this for alertBoxes specifically
every alertBox could look like so:
app.directive( 'alertBox', function(){
return{

....
link: function ( scope, element, attrs, alertBoxService ){
var showMe = false;
alertBoxService.register( attrs.alertBox, showMe )
}

}
} )
so basically
all I'm doing is inject the alertBoxService, register myself with it
pass it a variable, or my own scope, or whatever
I can pass it anything
and let the alertBox be able to manipulate or call it
that is how you have the most basic form of universal communication, regardless of the tree structure
and the link to pub/sub explains how to implement a generic pub/sub pattern, that would do the same thing
 
Let me try and figure this out real quick. All I've ever really done with directives is create basic tags that use templates.
 
communicating between directives is hard when you haven't had experience with it. But most of angular relies on adopting the DOM structure, so if you do not know how to relate directives inside the DOM tree structure, communicating is hard unless you do it through pub/sub
 
I'm having a hard time understanding your syntax in general. I'm failing to see where the service is injected, or where it's functions are being relayed.
 
let me make an example
 
5:05 PM
All right. I really appreciate the help. I'm pretty stuck.
 
this is communication without any hierarchy involved
or any angular for that matter
didnt write it very pretty, but it should show you the basics
let me know if it helps
 
5:33 PM
I'm doing some background research to understand.
Let me dissect this a little...
Mkay. So my first question is about .shift();
That method isn't defined in your controller, so I assume this is the standard shift() method used on arrays.
What is it doing?
 
sorry was gone
shift is just an array method
to get the first item from the array
its like saying array[0]
I basically separated my directive logic
so I have most of my directive logic in the controller
and the logic that deals with how to bootstrap, instantiate the directive in the link
 
The biggest confusion I'm having right now is what we are shifting.
 
so what I'm doing is instead of implicitly acquiring my own controller, I'm explicitly saying, give me my own controller from the require array
the require: definition
in require: ['alertBox']
what I am requireing here is "the controller of a directive"
in this case, the controller of myself
 
Right.
 
so in my link I get my controller
I call the init on myself
it's all fluff
but it would have been a good way to communicate with another directive, if they were siblings
or one is the parent of the other
i could have said, if I was a child of a form
require: '^form'
with the '^' im saying this directive controller i require is a parent
if I was a child of a form, and I'm an input, i could be saying
require: ['^form', 'ngModel', '?required']
give me the parent form, or give an error if there is none
 
5:48 PM
I really appreciate the help, but I'm still extremely confused. Almost none of this is clicking for me.
 
give me the sibling directive ngModel, and required, but required is optional, don't fail if there is no sibling directive required
if you look at the directive alertBox
it has a link function, and a controller function
 
Right.
 
so the link function is the latter half of the compile function, which is run in a particular order based on this directive's position in the DOM
 
The controller function is the 4th argument to the link function.
 
the controller function is initialized way before angular decides to build up its tree structure of parent/child directives and elements
 
5:50 PM
Why do you have to manually require the controller? Shouldn't the link function just automatically pull that controller instance since it is it's own controller?
 
so what I'm doing is
it can do it manually, by not passing the require property
but I am doing it explicitly so you know where it is getting that ctrl argument from
 
Okay.
 
automatically*
I want this directive's logic to be initialized in the correct order that angular deems worthy, the postLink
which is the link function, so I let the link function call the init on the controller
but the controller has all my logic
there is nothing more to it
the difference is that a controller can be passed a long to other directives, and I can even get it through the scope or through the injector
so having my logic separated in the controller will allow me to communicate easier with other directives
 
If it's not too much trouble, would you mind if I went through this and told you what I think is going on so you can see where I'm getting messed up?
 
other than that there is nothing to it. controller init() just registers itself with the alertServiceBox service, that i Dependency Injected into the controller
ok go for it
 
5:54 PM
The alertBox function is the function that will be passed to build the alertBox directive.
The first property of that object, "require" is explicitly requesting the controller that is also a property of the same object.
This is usually done automatically, but you explicitly wrote it to show me what controller is being injected into the link function.
 
correct
 
The next property, link, is a function with 4 arguments. The first is scope. Is this he scope of the alertBox directive, or the scope of alertBox's controller?
Regardless, the next argument, element, is a reference to the matched element. Since this directive is not restricted, it will match to the attribute placed on the DIV.
 
those 4 are all automagically injected by angular
 
Right. The link function is brand new to me.
 
that is why we initialize our directive in our link, because we know angular is now safely able to obtain the scope, the element and the attributes
 
5:59 PM
So I'm just confirming what they are.
The third property, attributes, is an object containing key value pairs relating the the HTML attributes of the matched element.
And the fourth argument, is the directive's controller, which we explicitly required.
You're then declaring a variable which is equal to the first index of the ctrl array/object.
This confuses me, because I'm not sure exactly what is at that index, and I'm not sure why or how we're treating the controller object as an array.
Not to mention that my understanding of the "shift" method leads me to believe that whatever is at that index should be destroyed after we have assigned its value to our new variable.
 
im just getting the require value
which is an array, and I want the first item inside of it
the reason I'm doing this has to do with overriding/extending/decorating directives
and you can absolutely ignore that
it was a mistake of me to put that there
 
So really in essence all that is doing is making a reference to the controller?
 
take a look at this simpler version
but i added more to the html view
so make sure you see that relationship
 
Mkay.
So, why are we setting a variable to "this" instead of just using "this?"
 
because of javascript's way of how this behaves
what language are you coming from?
 
6:11 PM
PHP
But not the nasty newbie kind.
 
ok well to be fair I haven't done PHP in years so I don't remember how the Classes work exactly
but JavaScript has 4 different ways this is invoked
and it is actually fairly complicated in how it is used
I am storing a reference to this, that variable is reachable from within the inner functions
because of the closure that they build of their environment
I also have to consider how angular treats this, and how it invokes certain parts
like its controller and directives etc.
so there is a part of the code I can't touch, so I'm forced to store a reference to this
for instance, I sent the entire context of the controller
the this
to the alertBox
but because of how javascript works
I now have a direct reference to those functions
and it no longer binds its this to the actual controller Object
 
So, it is a reference, not an instance, then.
 
so if I had used this, and not my reference context
it wouldnt know what this is
 
But if you had used this, there would be no referece.
I see.
Ahhh...
I think I'm getting this now.
I think I can explain it in broader terms without going line-by-line.
 
haha simpler version is a whole lot better :)
 
6:18 PM
All right, let me see if I can explain this.
 
there's not much to it honestly, but it takes a while to understand how you have to communicate between directives within angular
 
So, we create a directive which IS the alertBox.
Inside of that directive we create a controller.
The controller has an object in it. We can pass a reference to this object to our service, but we can't pass a reference to our "this" instance to the service.
(Which is why we made the object.)
 
no hold on
the this is just a nuisance
it does not pertain to the subject at all
it's just a way to right safe javascript
we are simply passing the controller as this
the entire controller as an object
in fact, this would've worked just fine
 
I'm confused why we need the object, then.
 
however, I do not write this because JavaScript has a complicated this and you simply never want to use it if you have no use for it
we don't need to, I just decided to pass the entire controller
is it live streaming?
 
6:21 PM
But isn't our object just a reference to "this?"
Yeah.
 
it wasn't necessary
 
The only reason I see for assigning "this" to a variable is to put it in the global scope?
 
no in the closure
a closure is the surrounding environment
so for the functions inside that lexical scope
the lexical scope is its closure
and it will have knowledge of it
it's basically a state
an environment state
these are sort of advanced parts of JavaScript
 
I'm sorry I'm so hard-headed. I see the vast majority of what you're doing now. I just don't see what we're doing with the extra variable.
 
can you see it update?
we didn't need to pass the element either
 
6:27 PM
Mhm.
 
yeah so I just broke it trying to remove context
haha
 
Sorry. :/
I'm definitely getting the general gist a lot more now, though.
 
yeah I don't try to even bother with this, too many things to think about
it's not worth it
in our case we just don't want to have to worry about this
it won't add anything
 
I'm still confused as to why it makes a difference.
And that's pretty much all I'm confused about at this point.
 
var foo = { a: function(){ return this } };
var bar = foo.a; bar() // this is not foo
foo.a() // this is foo
(foo.a)() // this is foo
(null, foo.a)() //this is not foo
 
6:41 PM
Right as you were explaining, I found this.
It's not a way to transmit out to the global scope, it's to give access to the parent's "this" to the child function.
Yes?
 
var foobar = function( fn ) { fn() }
foobar(foo.a) // not foo
it's slightly more complicated
technically, this is not supposed to refer to the global scope
 
Yeah, this is weird.
 
however, in non strict mode ES5 and in ES3 (really old javascript standard)
it does this extra step
where if the caller's this argument is undefined
it will do an extra step and instead bind it to the global scope
however, it is just a technicality and has nothing to do with how the this functions
the this has 4 methods of invocation that I don't know from the top of my head
 
So, when in doubt, assign it to a variable.
 
but it's through binding (bind(), call(), apply()), through object property access, through the constructor (class in php etc, calling an object with new keyword in javascript) and the function invocation
and they all act differently
if you desperately need a specific this
either bind it
or indeed, store a reference in the closure
 
6:45 PM
Gotcha.
Okay. Let me see if I can apply this to what I'm trying to do. I think I can whip it out pretty quickly.
I made a new JS Bin, in case I have issues.
 
sure, be my guest
 
7:08 PM
Close.
Sorry.
 
I changed it up a little, showing how you can use the controller and delegate a lot of functionality to angular directives instead
 
So, I think I finished...
But the console is showing like 480 errors and I don't know why. Haha.
 
ok lets see
are you still working on it?
 
Going through JS Lint to get rid of the errors.
But I gutted it on purpose.
I wanted the controller to control it, not another directive.
Shouldn't this work?
 
depends on your controller ;)
 
7:24 PM
This JS isn't even running.
And I see no reason why it shouldn't.
 
you haven't bootstrapped your angular app to the DOM
 
Why do I have to do that?
I write Angular apps all the time and never do that.
 
right now your module has no DOM to work with
well you probably added ng-app="app"
on your html tag, or body tag
right now there is nothing of the kind
your modules are ready to be run, but they have nothing to run on
 
Pffffffft.
Wow. I can't believe I missed that.
 
haha, welcome to where most of the errors lie, typos and common mishaps
ok
so you have the functions like me
but they are just functions right now, they are not properties of the service instance
you can either do .factory() style
and return the functions
or you can do .service() style
and create reference on the this to the function
 
7:29 PM
I usuall just use "this.
"
usually*
You just did it different and I forgot.
 
yes, well they're both pretty much the same
I changed it up
haha
you're close
but there are two minor problems with your controller
app.controller("someController", function($scope, alertBoxService) {
function toggle() {
alertBoxService.toggle();
}
});
 
The Angular errors suck so hard.
 
toggle is not a method of the controller yet
the second problem you have
is in your html
you're calling toggle()
but angular will be looking for toggle on the scope
and you are defining it as a controller method, not a scope method
best thing you should do is declare your controller like so
"someController as context"
 
I just changed it so it's on the $scope.
 
you don't need it on the scope
you can do controller as context
or whatever you want to call it
 
7:34 PM
I don't like using "controller as".
 
that will define your controller as a property of the scope
 
I vastly prefer $scope.
 
ok well there is a problem
with what you are doing
which also relates to some complex model of JavaScript
which is prototypal inheritance
 
scopes in angular, for some weird reason, are prototypally inherited
 
7:36 PM
There's still a problem.
That makes sense to me.
It's a View Model object.
 
yes it makes sense
but the problem is
that you can have issues with the inheritance
which you want to avoid
ok well it doesn't matter
the point is that controller as is a better way to approach this
 
I've never had a problem with scope, and it is so much more boilerplate to user controller as.
 
this.register = function(ctrl) {
alertBox = ctrl;
};
this.toggle = function() {
alertBox.callback();
};
it is more descriptive
it is far easier to read if you name your controllers well
if you name them all (like some people do)
and everything is vm.toggle() and vm.doThat() and vm.doThis()
controller as vm
yes, I agree, it's just wasted opportunity
however, if you do something like "myAlertController as myAlert"
myAlert.show();
it is far more readable, than just doing show()
 
show what?
toggle what?
 
7:40 PM
Yeah, but really you know which controller is running via the routes, and you're going to have to check anyways to see specifically what the controller is doing.
 
you have syntax errors in your service, this is what it looks like to me
app.service("alertBoxService", function() {
var alertBox;
this.function register(ctrl) {
alertBox = ctrl;
}
thisfunction toggle() {
alertBox.callback();
}
});
 
You can see which controller object you're using, but you still can't see what it's operating on specifically.
 
theres a big difference however
 
I don't have an account. Every new edition I get a new clone.
That's why I keep linking.
 
odd, I get the same one
 
7:42 PM
"Cannot set "visiblity" of undefined."
There, I registered.
 
element is a jQuery object, and .style is a HTMLElement property
context.element[0]
will work
jQuery or when you don't load jQuery it's a jQlite object
but it's the same
 
SWEET.
Why do we need the [0]? It's been a while since I used jQuery in any capacity.
Is it returning an arrat of matched elements?
array*
 
jQuery wraps everything in a jQuery object
but yeah, you can access the nodes themselves that way
document.body === $(document.body)[0] //true
but yeah just to end the discussion about the whole scope thing
when you reach a point you are working with a bigger team
on a bigger scale application
conformity and boilerplate/skeleton code, is a good thing
because everyone can understand and read other people's code
 
I just don't understand what the advantage is.
Because either way, the only way to know, really, is to check the routes.
Before you take off, I think I know how to do the ne last thing I need, but I'm editing that Fiddle to check now.
 
well you wanna make structures and patterns
good luck dude
so you would never have completely custom route controllers, they would all have the same structure, because that way people know what to expect
it's a good habit to make things generic, and make abstractions
and once you work on bigger scale applications, this is what will keep you sane
so it is better to make things more descriptive to an extent
anyhow, good luck with angular
 
8:01 PM
Worked just fine. Was just seeing if I could get the service to change the content of the box as well.
I really appreciate your help, man. I'll keep that in mind, for sure.
 

  last day (23 days later) »