Binding issue using ES6 + Angular1.5 + ui-router

Question

This is hanging the browser. I believe I'm not returning data the right way and misunderstanding some concepts, perhaps a timing problem?

controller.js

export default class XController {
    constructor($stateParams, YService) {

        this.getSlugByName = function(name) {
            return YService.get({name: name}).then(getSuccessFn, getFailFn);

            function getSuccessFn(data) {
                return data[0].slug;
            }

            function getFailFn() {
                console.error('Something went wrong');
            }
        }
    }
}
XController.$inject = ['$stateParams', 'YService'];

template.html

<ul>
    <li ng-repeat="each in vm.mainObject.objects"> // each is a name
    <a ui-sref="resolver({slug: vm.getSlugByName(each) })" class="btn">{{ each }}</a>
</ul>

routes.js

static resolver($stateParams, XService) {
    return XService.get({ slug: $stateParams.slug });
}

component.js

import templateUrl from './template.html';
import controller from './controller';

let xComponent = {
  restrict: 'E',
  bindings: {
    'mainObject': '<'
  },
  templateUrl: templateUrl,
  controller,
  controllerAs: 'vm'
};

export default xComponent;

Update

Added component file that explain where objects bind is coming from

rrd · Accepted Answer · 2016-05-19 14:29:49Z

0

I think one issue is that your method is inside the constructor:

export default class XController {
  constructor($stateParams, YService) {
  }

  function getSlugByName(name) {
    return YService.get({name: name}).then(getSuccessFn, getFailFn);

    function getSuccessFn(data) {
      return data[0].slug;
    }

    function getFailFn() {
      console.error('Something went wrong');
    }
  }
}

XController.$inject = ['$stateParams', 'YService'];

Where is your vm.objects coming from?

Anyway, try that, see if it fixes your issue.

answered May 19, 2016 at 14:29

rrd

5,9873 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chachan Over a year ago

objects are coming for a binding on component level. That's why is not in the controller. Let me try that but I have a good feeling

chachan Over a year ago

Ok. I tested it and function is an unexpected token. I removed it but I'm still getting the same problem

Community · Accepted Answer · 2017-05-23 11:53:50Z

0

I had a timing problem. I moved out YService and placed it as a resolver, that way the data will be available later on the controller. This is possible because I'm using angular-ui-router, otherwise I'd try with $scope.$on('$viewContentLoaded') as explained here

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered May 20, 2016 at 14:29

chachan

2,4721 gold badge28 silver badges43 bronze badges

Collectives™ on Stack Overflow

Binding issue using ES6 + Angular1.5 + ui-router

controller.js

template.html

routes.js

component.js

Update

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

controller.js

template.html

routes.js

component.js

Update

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related