Angular JS Component Bindung

Question

Ich habe folgende Komponente:

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

Die HTML-Vorlage:

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

Sein Controller:

(function() { 
    "use strict"; 

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

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

ich versuchen, es aus dem folgenden Code zu verwenden:

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

Ich sehe nicht pageName und pageNo im endgültigen HTML der gerenderten Seite. Was ist falsch?

Answer 1

Das Problem mit Camelcase war, haben wir lowcase:

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

und in der Komponente:

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

Und es funktioniert jetzt ok.

Answer 2

Sie müssen die Bindungsattributnamen konvertieren, um Bindestriche und Kleinbuchstaben zu verwenden. So für Ihr Beispiel:

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