2017-08-15 9 views
1

私はangularJSのコンポーネントパターンを学習しています。私はコンポーネントパターンでバインディングを使用しようとしています。私が使用したバインディング名はfirstnameです。しかし、問題はそれが拘束力がないということです。 ファーストネームabcのようなものに置き換えたとき、正常に動作します。誰でもその問題を引き起こしたと言えるでしょうか?このコンポーネントを呼び出すAngularJSコンポーネントパターンのバインディングには、特定の命名形式がありますか?

(function() { 
 
     angular.module('mainModule').component('heroList', { 
 
      template: '<p>Hello from component {{$ctrl.firstName}}</p>', 
 
      //controller: 'HeroListController', 
 
      bindings: { 
 
       firstName: '=' 
 
      } 
 
     }) 
 

 
    }());

のindex.htmlとindex.jsである:

(function() { 
 
     var app= angular.module('mainModule', []); 
 

 
     app.controller('myCtrl', function() { 
 
      var vm = this; 
 
      vm.firstName = "John"; 
 
      vm.lastName = "Doe"; 
 
     }) 
 
    
 
    
 
    }())
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Angular Components</title> 
 
    <script src="scripts/angular.min.js"></script> 
 
     <script src="index.js"></script> 
 
     <script src="heroes/hero-list.component.js"></script> 
 
     <script src="heroes/hero-list.controller.js"></script> 
 

 
</head> 
 
<body ng-app="mainModule" ng-controller="myCtrl as vm"> 
 

 
    {{vm.firstName}} {{vm.lastName}} 
 

 
    <hero-list firstName="vm.firstName"><hero-list> 
 

 
</body> 
 
</html>

成分コードは以下のとおりであります

> John Doe 
> 
>Hello from component 

しかし、私はABCfirstNameのを交換した後、私は、所望の出力を得る:私が手に出力されます。

>John Doe 
> 
>Hello from component John 

この問題を引き起こした原因を教えてもらえますか?

答えて

1

バインディングでは、コンポーネント名と同じcamelCase表記を使用します。それらはダッシュで区切られています。したがって、firstNameバインディングを使用するには、次のように使用します。

<hero-list first-name="vm.firstName"><hero-list> 
関連する問題