Angular form not in $scope, when put inside <content>

[bramslob]

I have a form which resides in a <view> inside a <content> directive.
When I wanted to check if the form was $invalid or not, i saw that the form was not in the $scope.

After a lot of debugging, I found that if you punt ng-form on the <content> directive, it works, but shouldn't it be possible to get the same functionality via 'vanilla' angular ?

[bramslob]

I see on the forums that you guys have been discussing it already (http://forum.ionicframework.com/t/cant-access-form-on-scope/679). Am still wondering if it is possible to do anything about? Now that I know I will not do it wrong anymore, but for newbies it might be confusing?

[ajoslin]

Required solution: Remove isolate scope for <content> directive and write our own attribute bindings.

Scheduled for 1.0 beta milestone and assigned to me. Thanks @bramslob :-)

[bramslob]

That sounds like the solution. Love Ionic, so anything to help ;)

[ajoslin]

If you want to open a pull request, go for it!

Basically I would like something like this in ionicContent's linking function:

.directive('content', ['$ionicBinder', function($ionicBinder) {
  return { link: function($scope, $element, $attr) {
   $ionicBinder.bind($scope, $attr, {
      onRefresh: '&',
      onRefreshOpening: '&',
      onScroll: '&',
      onScrollComplete: '&',
      refreshComplete: '=',
      onInfiniteScroll: '=',
      infiniteScrollDistance: '@',
      hasBouncing: '@',
      scroll: '@',
      padding: '@',
      hasScrollX: '@',
      hasScrollY: '@',
      scrollbarX: '@',
      scrollbarY: '@',
      startX: '@',
      startY: '@',
      scrollEventInterval: '@'
    });
  } };
}]);

$ionicBinder can base its code off of Angular's isolate scope binding code: https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L1404-L1475.

But you can simplify it a lot! We don't have two-way binding between an isolate scope and its parent scope here, only one-way binding from attrs to a scope. Here's a simplified version:

var getter;
switch(mode) {
  case '@':
    attrs.$observe(attrName, function(value) {
      scope[scopeName] = value;
    });
    //set initial value
    if (attrs[attrName]) {
      scope[scopeName] = $interpolate(attrs[attrName])(scope);
    }
    break;
  case '=':
    getter = $parse(attrs[attrName]);
    scope.$watch(getter, function(value) {
      scope[scopeName] = value;
    });
    break;
  case '&':
    getter = $parse(attrs[attrName]);
    scope[scopeName] = function(locals) {
      return getter(scope, locals);
    };
    break;
}

Post any questions you have here if you wanna go for it! And if it seems too complicated for you, that's ok.

[bramslob]

Thanks for providing some context in which I could make a pull request. It is a bit too complicated for me right now. Have not been working with Angular and Ionic for long. So I'm sorry, but I can't write this pull request

[ajoslin]

That is fine @bramslob! Explaining it helped me to think it out too :-)

[QuentinFchx]

Is it fixed ?
I'm running into this issue with a form within a content within a view.
I can't access the form from the $scope

EDIT: when removing the content tag, it works, but I need this tag 😕

[nidheeshdas]

If my memory is right, you can write, $parent.myForm in

tag and it will still work. But then the question is why is Ionic creating isolate scopes eveywhere. If I had to move my form in and out of content tag, or a slidebox, i've to change the bindings as well.