fix(ui-view): change $viewContentLoading to pair with $viewContentLoaded

The old $viewContentLoaded event wasn't needed for the one internal
client (ui-view) because ui-view always ignores that event and acts on
a $stateChangeSuccess event that follows right behind anyway.

And it wasn't as useful to external clients as it could be because
it wasn't delivered on every view update -- it was delivered only
on state transitions that activate a state defining a view, and
didn't deal with inheritance.

Also, neither $viewContentLoading nor $viewContentLoaded events
contained the name of the view loading or loaded.

This change makes $viewContentLoading and $viewContentLoaded be
emitted always in pairs, before/after updateView does the work of
actually loading the view, and both events include the name of the
view being loaded.

This is a breaking change for users of the old $viewContentLoading
event that relied on it being broadcast from the root scope, the
precise time it was broadcast, the fact that it wasn't always sent
when a view is loaded even if $viewContentLoaded will be sent, or the
"options" parameter that was emitted with it. If people rely on any of
that behavior and we can't break it, then we can restore the old
behavior but I think there needs to be some other event which is
reliably paired with $viewContentLoaded and contains the view name,
and I can't think of a better name than $viewContentLoading for that
event.

Closes #685.

Author: Matt Ginzton

Diff for: src/view.js

@@ -36,32 +36,6 @@ function $ViewProvider() {
         if (options.view) {
           result = $templateFactory.fromConfig(options.view, options.params, options.locals);
         }
-        if (result && options.notify) {
-        /**
-         * @ngdoc event
-         * @name ui.router.state.$state#$viewContentLoading
-         * @eventOf ui.router.state.$view
-         * @eventType broadcast on root scope
-         * @description
-         *
-         * Fired once the view **begins loading**, *before* the DOM is rendered.
-         *
-         * @param {Object} event Event object.
-         * @param {Object} viewConfig The view config properties (template, controller, etc).
-         *
-         * @example
-         *
-         * <pre>
-         * $scope.$on('$viewContentLoading',
-         * function(event, viewConfig){
-         *     // Access to all the view config properties.
-         *     // and one special property 'targetView'
-         *     // viewConfig.targetView
-         * });
-         * </pre>
-         */
-          $rootScope.$broadcast('$viewContentLoading', options);
-        }
         return result;
       }
     };

Diff for: src/viewDirective.js

@@ -180,9 +180,6 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate)
         scope.$on('$stateChangeSuccess', function() {
           updateView(false);
         });
-        scope.$on('$viewContentLoading', function() {
-          updateView(false);
-        });
 
         updateView(true);
 
@@ -216,6 +213,20 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate)
           newScope = scope.$new();
           latestLocals = $state.$current.locals[name];
 
+          /**
+           * @ngdoc event
+           * @name ui.router.state.directive:ui-view#$viewContentLoading
+           * @eventOf ui.router.state.directive:ui-view
+           * @eventType emits on ui-view directive scope
+           * @description
+           *
+           * Fired once the view **begins loading**, *before* the DOM is rendered.
+           *
+           * @param {Object} event Event object.
+           * @param {string} viewName Name of the view.
+           */
+          newScope.$emit('$viewContentLoading', name);
+
           var clone = $transclude(newScope, function(clone) {
             renderer.enter(clone, $element, function onUiViewEnter() {
               if(currentScope) {
@@ -236,12 +247,13 @@ function $ViewDirective(   $state,   $injector,   $uiViewScroll,   $interpolate)
            * @name ui.router.state.directive:ui-view#$viewContentLoaded
            * @eventOf ui.router.state.directive:ui-view
            * @eventType emits on ui-view directive scope
-           * @description           *
+           * @description
            * Fired once the view is **loaded**, *after* the DOM is rendered.
            *
            * @param {Object} event Event object.
+           * @param {string} viewName Name of the view.
            */
-          currentScope.$emit('$viewContentLoaded');
+          currentScope.$emit('$viewContentLoaded', name);
           currentScope.$eval(onloadExp);
         }
       };