使用 ES6 + Angular1.5 + ui-router 的绑定问题答案

【问题标题】：Binding issue using ES6 + Angular1.5 + ui-router使用 ES6 + Angular1.5 + ui-router 的绑定问题
【发布时间】：2016-05-19 14:05:09
【问题描述】：

这是挂起浏览器。我相信我没有以正确的方式返回数据并且误解了一些概念，也许是时间问题？

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'];

模板.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;

更新

添加了解释objects绑定来自何处的组件文件

【问题讨论】：

标签： angularjs angular-ui-router ecmascript-6

【解决方案1】：

我认为一个问题是您的方法在构造函数中：

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'];

你的 vm.objects 来自哪里？

不管怎样，试试看，看看能不能解决你的问题。

【讨论】：

对象即将在组件级别进行绑定。这就是为什么不在控制器中。让我试试，但我感觉很好
好的。我对其进行了测试，function 是一个意外的标记。我删除了它，但我仍然遇到同样的问题

【解决方案2】：

我遇到了时间问题。我搬出YService 并将其作为解析器放置，这样数据稍后将在控制器上可用。这是可能的，因为我使用的是 angular-ui-router，否则我会尝试使用 $scope.$on('$viewContentLoaded')，如 here 所解释的那样

【讨论】：