2.3 Add a Component Controller

Hi folks, in this lesson we're going to fill out the controller that we added to the component in the last lesson. Let's make a start by bringing the Hyde modal method into the component so that the modal can be closed once more. For starters, we'll need to add the modal namespace to the NG click directive in the modal template since we're using the controller as property in the component configuration. The template, don't forget, is in templates/modal.html. We just need to update the data-ng-click directive. Next, we can bring the height modal method into the modal.js file from controllers/ nodes. Inside a components controller, this is set to an instance of the component. We can create a variable named after the component, install the object in it for clarity. And let's now copy the hideModal method into the controller and instead of using the $scope property, we just want to update that to the modal variable that we just created. Inside the method where using the $scope object again. So we need to update this as well. So let's use our modal variable once again. And let's also update the name of the property to modal is visible instead of show modal because that sounds more like a method. Now that the modal is visible property, is inside the component, we can update the templates MG if directive from $parents to use modal and our new property. Lets go back to the controller now and add a show modal method. Great, so now we need some way to tell the modal to close from outside of the component. We can use angulars-pubsub capabilities to raise an event instructing the modal to open or close. So back in the controllers/notes.js file, there are a couple of places where we're setting the show modal scope property. We can't do this anymore. So let's broadcast an event from the rootScope which we can pick up in the modal. So first of all we need to inject the $rootScope service into the controller. We can completely remove the first occurrence of the show modal property where we initialize it to false. The next occurrence of show modal is in the pre-save node method. Let's change that to broadcast a show modal event. Now back in our modal.js file, we combined to to this show modal event. We need to inject a scope into our controller and we can do that with the $scope service. So we use the array format to inject the scope dependency. And this just ensures that the dependency injection is minification safe. This is a standard angular best practice. So now let's bind to the show modal event. And inside the call back function we just want to invoke our showmodal method. So, let's run the example now. And when we create a new note, add some text to the text area and hit the save note button, we should see our modal. So we need to be able to close the modal by clicking somewhere on the overlay. At the moment that's still working as it did previously, but we can update that so there is the component itself that is hiding the overlay and modal rather than the notes js controller. So back in the controllers/notes.js file, we need to replace the last remaining occurrence of show modal where it gets set to false in the Save Note method to broadcast a hide modal event instead And then back in the component we need to bind to this event as well. This one's a little bit more complex because the hide modal method requires an event object be passed to it, and he uses this event object to determine whether or not to close the modal. So, we can add the event object to the callback function as an argument. And then we just need to manually add targets and class list properties and a contains method that returns true. The reason why we set the contains method to a function that returns true is because if the overlay is clicked, the target.classlist.contains method of the regular event objects will return true and the motor will be closed. So, we're just faking that same behavior. So now that we've done that, we can invoke the hide modal method and pass it our fake event object. Things aren't quite wired up yet, in order to see this event in action. At the moment, the input is bounds to the current note title property. But it can't currently access this from the component scope because that is attached to the notes controller scope. We also can't invoke the save method from within the component. But don't worry. We’ll come back and fix these in the next lesson. So in this lesson we moved some of the models functionality into its own controller to encapsulate it within the component. We added hide modal and show model methods as well as adding event handlers for the show modal and hide modal events. We saw that we can easily inject dependencies into the controller for the component. Thanks for watching.