Angular JS 组件绑定

【问题标题】：Angular JS Component BindingAngular JS 组件绑定
【发布时间】：2026-01-19 08:45:02
【问题描述】：

我有以下组件：

(function () {
    "use strict";
    angular.module("application_module")
        .component('tab', {
            controller: 'TabCtrl',
            templateUrl: 'app/component/application/app-header/tab/tab.html',
            bindings: {
                'pageName': '<',
                'pageNo': '<'
            }
        });
})();

它的html模板：

<md-nav-item md-nav-click="$ctrl.goto($ctrl.pageNo)"
             name="$ctrl.pageNo">
    {{$ctrl.pageName}}
</md-nav-item>

它的控制器：

(function () {
    "use strict";

    angular.module("application_module")
        .controller('TabCtrl', TabCtrl);

    function TabCtrl() {
        let self = this;
    }
})();

我尝试从以下代码中使用它：

<tab pageName="EmployeeInfo" pageNo="page1"></tab>

我在渲染页面的最终 html 中没有看到 pageName 和 pageNo。怎么了？

【问题讨论】：

标签： javascript angularjs binding components

【解决方案1】：

问题在于camelCase，我们使用小写：

<tab pagename="EmployeeInfo" pageno="page1"></tab>

在组件中：

bindings: {
    'pagename': '@',
    'pageno': '@'
}

现在可以正常使用了。

【讨论】：

【解决方案2】：

您需要将绑定属性名称转换为使用连字符和小写字符。所以对于你的例子：

<tab page-name="EmployeeInfo" page-no="page1"></tab>

【讨论】：