Question

我有以下组件：

(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。有什么问题？

Answer 1

问题出在camelCase上，我们使用了lowcase：

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

并在组件中：

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

现在它可以正常工作了。

Answer 2

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

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

Angular JS组件绑定

2 个答案: