AngularJS 1.5 组件将数据绑定到控制器并使用模板查看 url

Question

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

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

例如我的页面名称：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);
  }
});

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

谢谢 ;)

Answer 1

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

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

Answer 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
    };
  }
});

有关详细信息，请参阅

Answer 3

我终于找到了解决办法。

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) {

}

AngularJS 1.5 组件将数据绑定到控制器并使用模板查看 url

AngularJS 1.5 components binding data to controller and view with template url

javascript

angularjs

angularjs-components