AngularJS，从指令迁移到组件

Posted 2023-02-23

【中文标题】AngularJS，从指令迁移到组件

【英文标题】：AngularJS, migrate from directive to component

【发布时间】：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 没有任何错误。现在我添加我如何使用我的模板

【参考方案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" 之类的操作。