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

score 0 · Answer 1 · answered May 19 '16 at 14:29

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 '16 at 14:29

rrd

5,789
3
28
36

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 May 19 '16 at 14:53
Ok. I tested it and `function` is an unexpected token. I removed it but I'm still getting the same problem – chachan May 19 '16 at 16:21

score 0 · Accepted Answer · edited May 23 '17 at 11:53

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 '17 at 11:53

Community

1
1

answered May 20 '16 at 14:29

chachan

2,382
1
26
41