Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
bramslob opened this issue Feb 7, 2014 · 8 comments
Closed

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

bramslob opened this issue Feb 7, 2014 · 8 comments
Milestone

Comments

@bramslob
Copy link

bramslob commented Feb 7, 2014

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
Copy link
Author

bramslob commented Feb 7, 2014

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?

@bramslob bramslob closed this as completed Feb 7, 2014
@bramslob bramslob reopened this Feb 7, 2014
@adamdbradley adamdbradley added this to the 0.9.25 milestone Feb 7, 2014
@ajoslin ajoslin closed this as completed Feb 7, 2014
@ajoslin ajoslin reopened this Feb 7, 2014
@adamdbradley adamdbradley modified the milestones: 1.0 Beta, 0.9.25 Feb 10, 2014
@ajoslin
Copy link
Contributor

ajoslin commented Feb 10, 2014

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
Copy link
Author

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

@ajoslin
Copy link
Contributor

ajoslin commented Feb 10, 2014

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.

@adamdbradley adamdbradley modified the milestones: 0.9.26, 1.0 Beta Feb 10, 2014
@bramslob
Copy link
Author

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
Copy link
Contributor

ajoslin commented Feb 21, 2014

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

ajoslin added a commit that referenced this issue Feb 24, 2014
Adds new '$ionicBindParent' service, which takes an object containing
binding definitions (similar to angular directive isolate scope
definition).  Allows binding of any scope and attributes to any parent
scope, letting us do normal parent -> child scope binding without having
to create isolate scopes.

Closes #555
ajoslin added a commit that referenced this issue Feb 24, 2014
Adds new '$ionicBindParent' service, which takes an object containing
binding definitions (similar to angular directive isolate scope
definition).  Allows binding of any parent scope & directive attributes
to a child scope, letting us do normal parent -> child scope binding
without having to create isolate scopes.

Closes #555
ajoslin added a commit that referenced this issue Feb 24, 2014
Adds new '$ionicBindParent' service, which takes an object containing
binding definitions (similar to angular directive isolate scope
definition).  Allows binding of any parent scope & directive attributes
to a child scope, letting us do normal parent -> child scope binding
without having to create isolate scopes.

Closes #555
ajoslin added a commit that referenced this issue Feb 24, 2014
Adds new '$ionicBindParent' service, which takes an object containing
binding definitions (similar to angular directive isolate scope
definition).  Allows binding of any parent scope & directive attributes
to a child scope, letting us do normal parent -> child scope binding
without having to create isolate scopes.

Closes #555
ajoslin added a commit that referenced this issue Feb 24, 2014
Adds new '$ionicBind' service, which takes an object containing
binding definitions (similar to angular directive isolate scope
definition).  Allows binding of any directive attribute & expressions
from a scope, letting us do normal attribute -> scope binding
without having to create isolate scopes.

Closes #555
@QuentinFchx
Copy link

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
Copy link

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 7, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
5 participants