AngularJS，从指令迁移到组件答案

【问题标题】：AngularJS, migrate from directive to componentAngularJS，从指令迁移到组件
【发布时间】：2016-05-26 02:15:24
【问题描述】：

我正在尝试添加组件而不是指令，但它不起作用。我的指令：

    (function() {
    'use strict'; 
    angular.
        module('eventeditor')
        .directive("displayTab",
            function() {
                return({
                    templateUrl: function(elem, attr){
                        if(attr.tabname === 'details') return "/organizer/fragments/detailsform.html";
                    }
                });
            }
        );
    })();

组件样式：

(function() {
'use strict';

angular.
    module('eventeditor')
    .component("displayTab", {
        templateUrl: function($element, $attrs) {
            if ($attrs.tabname === 'details') return "/organizer/fragments/detailsform.html";
        }
    });

})();

我做错了什么？我使用我的模板：

<div ng-switch="nav.getTab()">
    <div ng-switch-when="details" display-tab="" tabname="details">details</div>
</div>

【问题讨论】：

您在浏览器控制台上看到任何错误吗？您如何在模板中使用指令/组件？
@ShuheiKagawa 没有任何错误。现在我添加我如何使用我的模板

标签： javascript angularjs components directive

【解决方案1】：

组件仅对元素名称起作用，而指令默认为元素名称和属性名称。

<div ng-switch="nav.getTab()">
    <display-tab ng-switch-when="details" tabname="details">details</display-tab>
</div>

【讨论】：

是的，它有效！但现在还有另一个问题。。我想从模型中获取数据，但我得到空输入值，为什么？在组件中我添加绑定
你的绑定是什么样的？另外，如何在组件的模板中显示数据？
绑定看起来像：绑定：{类型：'@'，名称：'@'，标签：'@'，模型：'='，错误：'='，选项：'=' , changefunction: '=' }, 在模板中我像使用指令一样显示数据：
这是我的模板输入

{{label}}

{{error}}
知道了。对于组件，默认设置controllerAs: '$ctrl'。您需要在组件模板中执行 name="{{$ctrl.name}}" 之类的操作。