AngularJS,从指令迁移到组件

时间:2016-02-15 08:43:41

标签: javascript angularjs components directive

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

    (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>

1 个答案:

答案 0 :(得分:1)

组件仅适用于元素名称,而指令默认使用元素名称和属性名称。

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