Angular JS組件綁定

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>