Question

如何使用解析和绑定将视图中的组件传递给数据？当我将数据传递给控制器时，它运行良好但是使用组件它不起作用。

      .config(function ($stateProvider) {
        $stateProvider
          .state('stState', {
            url: '/state',
            ncyBreadcrumb: {
              label: 'State'
            },
            views: {
              '': {
                component: 'stState'
              }
            },
            resolve: {
              data: function (dataService) {
                return dataService.getData();
              }
            }
          });
      })

      .component('stState', {
        templateUrl: 'app/stState/stState.html',
        controller: StStateController,
        bindings: {
          data: '<'
        }
      });

    function StStateController() {
       this.data = {};
    }

Answer 1

您将获得data作为服务，并且必须将其注入您的控制器。就像你对$scope

所做的那样

function StStateController(data) {
   this.data = data;
}

Answer 2

UI路由器仅将实例注入其管理的视图（状态）控制器。您的选择是：

将data注入视图控制器并将其放在$scope上，然后通过属性绑定将其传递给您的组件。
OR：创建一个服务，让我们说MyDirectiveDataService，你的组件知道（此时你的组件必须是一个带有自己的控制器的完全成熟的指令），然后将MyDirectiveDataService注入视图控制器并使用控制器调用MyDirectiveDataService.setData(data)。如果您没有明确分离关注点，这种方法可能会产生奇怪的副作用，但它会起作用。

我完全避免做的事情是使用组件作为$ state视图。再次，由于关注点的分离。

角度绑定与视图中的解析

2 个答案: