Question

我正在angular-js-styleguide-snippets使用Atom，当我在编辑器中输入ngcomponent时，会扩展为以下结构：

( function() {
    'use strict';

    angular
        .module( 'arroyo' )
        .component( 'intro', component );

    /* @ngInject */
    function component() {
        var settings = {
            template: '<h1>test</h1>',
            controller: Controller,
        };

        return settings;
    }

    Controller.$inject = [];

    /* @ngInject */
    function Controller() {

    }
} )();

但是，使用上面的代码似乎不起作用。虽然没有控制台错误，但组件本身（<intro></intro>）不会呈现任何内容。经过一番摆弄后，我发现使用下面的代码按预期工作：

( function() {
    'use strict';

    angular
        .module( 'arroyo' )
        .component( 'intro', {
            template: '<h1>test</h1>'
        } );
} )();

第一个片段出了什么问题？

Answer 1

您必须像这样调用函数组件：

angular
    .module( 'arroyo' )
    .component( 'intro', component());

新的组件方法实际上是通过调用返回该对象的函数来获取设置的对象。

查看docs了解详情。

角度组件样式指南

1 个答案: