AngularJS 1.5 组件将数据绑定到控制器并使用模板 url 进行视图答案

【问题标题】：AngularJS 1.5 components binding data to controller and view with template urlAngularJS 1.5 组件将数据绑定到控制器并使用模板 url 进行视图
【发布时间】：2018-12-10 23:01:31
【问题描述】：

我想在 AngularJS 1.5 版本中实现视图和控制器之间的双向数据绑定。

主要目的是做一个页面（本身就是一个组件）处理访问引用数据的子组件。

例如，我有页面名称：Dashboard。

我希望此页面包含 HeaderComponent ListComponent 和 FooterComponent。

例如，我想将数据从 Dashboard 组件或根组件 ($rootScope) 传递到 ListComponent，

像这样：

<list-component key="123"></list-component>

但是我找不到访问 ListComponent 组件或控制器中的 key 属性的方法。

这是我尝试过的：

// list.js component

app.component('listComponent', {
  templateUrl: "/shared/list/list.html",
  bindings: {
    key: '='
  },
  controller: function() {
    console.log(key);
    // or maybe
    console.log(this.key);
  }
});

稍后我将使用带有 AngularJS 默认指令的 HTML 中的 key 作为双向数据绑定。但到目前为止我还无法访问key 属性。

谢谢;)

【问题讨论】：

一般来说，对于组件，避免双向绑定。而是使用< 的单向绑定作为输入，使用& 的表达式绑定作为输出。这将使迁移到 Angular 2+ 更容易。有关详细信息，请参阅AngularJS Developer Guide - Component-based application architecture。
与key="123" 的双向绑定将失败并出现错误。见AngularJS Error Reference - Error: $compile:nonassign Non-Assignable Expression。
我不明白。假设在 HeaderComponent 中，我想为用户 A 显示 1 2 3 个选项，而我想为用户 B 显示 4 5 6 个选项。然后，当用户 a 使用选项 2（仅对他专用）进行操作时，我想要在 HeaderComponent 本身而不是在 DashbordComponent 中处理该操作。但我希望从 HeaderComponent 执行的数据可以访问，就好像它是直接在 DashboardComponent 中创建的一样。否则，所有的功能仍然在 DashboardComponent 中中继，我想让他几乎是空白的。

标签： javascript angularjs angularjs-components

【解决方案1】：

我终于找到了解决办法。

app.directive("datepickerComponent", () => {
  return {
    templateUrl: "/shared/datepicker/datepicker.html",
    scope: true,
    link: function(scope, element, attrs) {
      datepickerComponent(scope, element, attrs)
    }
  }
});

function datepickerComponent(scope, element, attrs) {

}

【讨论】：

【解决方案2】：

要将key 属性作为字符串访问，请使用@ 的属性绑定：

<list-component key="123"></list-component>

app.component('listComponent', {
  templateUrl: "/shared/list/list.html",
  bindings: {
    ̶k̶e̶y̶:̶ ̶'̶=̶'̶
    key: '@'
  },
  controller: function() {
    this.$onInit = function() {
      console.log(this.key); // 123
    };
  }
});

有关详细信息，请参阅

【讨论】：

【解决方案3】：

尝试使用 onInit 事件处理程序：

controller: function () {
                this.$onInit = function() {
                    console.log(this.key);
                };
}

【讨论】：

是的，@raz 您可以使用 $onInit 访问该属性。
好的，现在我可以返回在列表组件中创建的数据了吗？例如，用户向列表中添加了一个新项目，我需要将其返回到主仪表板组件。这种事情怎么办？
顺便说一句，如果我在执行 this.key 而不是控制台日志，则会收到错误消息：错误：[$compile:nonassign] 与指令“listComponent”一起使用的属性“key”中的表达式“123”是不可分配的