1

我在我的应用程序中使用 angular 1.5 组件，这是我的结构：

<body ng-app ng-controller="appController as app">
    <div ui-view="home">
        <home-component>
            {{ app.user }}
        </home-component>
    </div>
</body>

基本上，我将 ui-router 与 Angular 组件一起用于嵌套视图。

我知道，使用controller as语法，您可以访问父控制器，但是由于某种原因我不能。没有显示任何内容{{ app.user }}

现在我已经阅读，组件的范围是隔离的，但我认为这仅仅意味着父组件无法访问子组件。

如果它是完全隔离的，我将如何访问父控制器中的全局数据？

谢谢你！

4

3 回答 3

1

使用该require属性访问父控制器并将绑定映射到子组件的控制器：

app.component("homeComponent", {
  require: {main: "^ngController"},
  template: 
    `<fieldset>
      <h3>home-component</h3>
      <p> $ctrl.main.user = {{$ctrl.main.user}}</p>
    </fieldSet>`
})

上面的示例绑定到ng-controller 指令的控制器。

从文档：

组件间通信

指令可以要求其他指令的控制器启用彼此之间的通信。这可以通过为require属性提供对象映射在组件中实现。对象键指定所需的控制器（对象值）将绑定到所需组件的控制器的属性名称。

— AngularJS 开发者指南 - 组件（组件间通信）

演示

angular.module("app",[])
.component("homeComponent", {
  require: {main: "^ngController"},
  template: 
    `<fieldset>
      <h3>home-component</h3>
      <p> $ctrl.main.user = {{$ctrl.main.user}}</p>
    </fieldSet>`
})
.controller("appController", function() {
  var main = this;
  main.user = "someUser";
})
<script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app="app" ng-controller="appController as main">
      <h2>Main App</h2>
      <input ng-model="main.user" />
      <br><br>
      <home-component>
      </home-component>
  </body>

于 2017-08-09T01:52:26.817 回答
1

您可以使用 requires 在子组件中创建对它的引用。

这种语法基本上到处都能找到它：

require: {
      app: '^homeComponent'
    }

或者此语法将只查找一个作为父组件的组件：

require: {
      app: '^^homeComponent'
    }

然后在子组件中，您可以通过 app 属性引用 homeComponent。

您还可以通过在它前面加上一个 ? 喜欢：

  app: '?^^homeComponent'
于 2017-08-08T20:53:02.547 回答
0

如果指令是孤立的，最好传递参数需要使用的任何值，否则为什么要使其孤立？

<home-component user="app.user"></home-component>

.directive('homeComponent', function() {
  return {
    scope: { user: '=' },
    ...
  }
})

或者，如果在子指令中不需要使用内容，您可以将其嵌入

<home-component>
    {{ app.user }}
</home-component>

.directive('homeComponent', function() {
  return {
    transclude: true,
    template: '<div><ng-transclude></ng-transclude></div>',
    ...
  }
})
于 2017-08-09T03:49:42.760 回答