Assignable expressions enhancement

Author: dhilt

README.md

@@ -83,9 +83,11 @@ Some of the properties offered by the adapter can also be accessed directly from
 
 The `expression` can be any angular expression (assignable expression where so specified). All expressions are evaluated once at the time when the scroller is initalized. Changes in the expresion value after scroller intialization will have no impact on the scroller behavior.
 
-The assignable expressions will be used by scroller to inject the requested value into the target scope. The scope associated with the viewport (the element marked with the [uiScrollViewport](#uiscrollviewport-directive) directive) will be used as the target scope. If the viewport is not defined (window viewport), the $rootScope will be used as the target scope.
+The assignable expressions will be used by scroller to inject the requested value into the target scope. The scope associated with the viewport (the element marked with the [uiScrollViewport](#uiscrollviewport-directive) directive) will be used as the target scope. If the viewport is not defined (window viewport), the $rootScope will be used as the target scope. Note that the nearest additional scope-wrapper (like ng-if directive set right on the viewport) makes this mechanism unusable. There are two options which help in this case:
 
-The second format `expression on controller` can be used to explicitly target the scope associated with the specified controller as the target scope for the injection. In this format `expression` is any angular assignable expression, and `controller` is the name of controller constructor function as specified in the `ng-controller` directive. The scroller will traverse its parents to locate the target scope associated with the specified controller.
+1. The second format `expression on controller` can be used to explicitly target the scope associated with the specified controller as the target scope for the injection. In this format `expression` is any angular assignable expression, and `controller` is the name of controller constructor function as specified in the `ng-controller` directive. The scroller will traverse its parents to locate the target scope associated with the specified controller.
+
+2. Also `Controller As` syntax could be used as an alternative way to specify target controller in assignable expressions.
 
 ###Data Source
 Data source is an object to be used by the uiScroll directive to access the data.

src/ui-scroll.js

@@ -416,7 +416,7 @@ angular.module('ui.scroll', [])
         return viewport;
       }
 
-      function Adapter($attr, viewport, buffer, adjustBuffer) {
+      function Adapter($attr, viewport, buffer, adjustBuffer, element) {
         const viewportScope = viewport.scope() || $rootScope;
         let disabled = false;
         let self = this;
@@ -512,21 +512,36 @@ angular.module('ui.scroll', [])
             if (!match)
               throw new Error('Expected injection expression in form of \'target\' or \'target on controller\' but got \'' + expression + '\'');
             let target = match[1];
-            let controllerName = match[2];
-            if (controllerName) {
-              let candidate = viewport;
-              scope = undefined;
+            let onControllerName = match[2];
+
+            let parseControllers = (controllerName, as = false) => {
+              let candidate = element;
               while (candidate.length) {
                 let candidateName = (candidate.attr('ng-controller') || '').match(/(\w(?:\w|\d)*)(?:\s+as\s+(\w(?:\w|\d)*))?/);
-                if (candidateName && candidateName[1] === controllerName) {
+                if (candidateName && candidateName[as ? 2 : 1] === controllerName) {
                   scope = candidate.scope();
                   break;
                 }
                 candidate = candidate.parent();
               }
-              if (!scope)
-                throw new Error('Failed to locate target controller \'' + controllerName + '\' to inject \'' + target + '\'');
+            };
+
+            if (onControllerName) { // 'on' syntax parsing
+              scope = null;
+              parseControllers(onControllerName);
+              if (!scope) {
+                throw new Error('Failed to locate target controller \'' + onControllerName + '\' to inject \'' + target + '\'');
+              }
             }
+            else { // try to parse with 'Controller As' syntax
+              let controllerAsName;
+              let dotIndex = target.indexOf('.');
+              if(dotIndex > 0) {
+                controllerAsName = target.substr(0, dotIndex);
+                parseControllers(controllerAsName, true);
+              }
+            }
+
             assign = $parse(target).assign;
           }
           return (value) => {
@@ -564,9 +579,9 @@ angular.module('ui.scroll', [])
       function link($scope, element, $attr, controllers, linker) {
 
         const match = $attr.uiScroll.match(/^\s*(\w+)\s+in\s+([(\w|\$)\.]+)\s*$/);
-
-        if (!(match))
+        if (!match) {
           throw new Error('Expected uiScroll in form of \'_item_ in _datasource_\' but got \'' + $attr.uiScroll + '\'');
+        }
 
         function parseNumericAttr(value, defaultValue) {
           let result = $parse(value)($scope);
@@ -590,7 +605,7 @@ angular.module('ui.scroll', [])
 
         let buffer = new Buffer(bufferSize);
         let viewport = new Viewport(buffer, element, viewportController, padding);
-        let adapter = new Adapter($attr, viewport, buffer, adjustBuffer);
+        let adapter = new Adapter($attr, viewport, buffer, adjustBuffer, element);
         if (viewportController)
           viewportController.adapter = adapter;