AngularJS 组件定义为函数

Question

当我使用返回 component 对象的函数创建组件时，我的组件未初始化！我正在分享这两种情况。有人可以解释一下它们之间有什么区别吗？

Html:

<div ng-app="demoApp">
  <navbar></navbar>
</div>

工作代码：Fiddle

var NavbarTemplate = `<button ng-click="$ctrl.clickTest()">Click Test</button>`;
var navbar = {
  controller: function() {
    this.clickTest = clickTest;
    function clickTest() {
      alert("hello");
    }
  },
  template: NavbarTemplate
};
angular.module('demoApp', []).component('navbar', navbar);

错误（无错误）代码：Fiddle

function getComponent(){
    var template = `<button ng-click="$ctrl.clickTest()">Click Test</button>`;
    var component = {
    controller: function() {
      this.clickTest = clickTest;
      function clickTest() {
          alert("hello");
        }
    },
    template: template
  }
  return component;
}
angular.module('demoApp', []).component('navbar', getComponent);

Answer 1

您需要在作为参数传递到最后一行的 getComponent 中添加括号，如下所示：

angular.module('demoApp', []).component('navbar', getComponent());

简单地使用 getComponent（不带括号）将对 getComponent 函数的引用传递给 component() 而不执行它。但是，angular 需要一个包含您的组件配置的对象。

因此，传递 getComponent() 调用函数和 returns 组件配置对象将所述配置对象传递给 angular component() 初始化程序而不是对函数的引用 getComponent.

AngularJS 组件定义为函数

AngularJS Component define as function

javascript

jquery

angularjs

angular-components