AngularJSコンポーネント：= bindingを使用してパラメータを渡す

パラメータをAngularJSコンポーネント（Angular 1.5）に渡そうとしています。しかし、私はコンポーネントでアクセスできません。コードに何が間違っているのか教えてもらえますか？最初のスニペットでAngularJSコンポーネント：= bindingを使用してパラメータを渡す

http://jsbin.com/fopuxizetu/edit?html,js,output

出典

2016-12-04 MSK

あなたが変数名として 'param'と' hero'に渡すものを処理しています。あなたはそれらが価値として扱われることを期待しているようです。値を渡すには '@'バインディングを使用してください。 – Toddsden

それが値をとるように、私は@との結合を置き換えます。 =バインディングを使用すると、変数を渡すことが期待されます。

2番目のスニペットでは、=バインディングを使用しましたが、ng-intを使用して変数を作成しました。

angular 
 
     .module('client', []) 
 
     .component('testComponent', { 
 
      template: '<h1>{{$ctrl.param}}</h1>', 
 
      controller: function() { 
 
       // this.param = '123'; 
 
      }, 
 
      bindings: { 
 
       param: '@' 
 
      } 
 
     }) 
 
     .component('heroDetail', { 
 
      template: '<span>Name: {{$ctrl.hero}}</span>', 
 
      controller: function() {}, 
 
      bindings: { 
 
       hero: '@' 
 
      } 
 
     });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 

 
    <title>AngularJS Example</title> 
 

 
    <!-- AngularJS --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 

 

 
</head> 
 
<body> 
 

 
<div ng-app="client"> 
 
    Test 
 
    <test-component param = "Test123"> </test-component> 
 
    <hero-detail hero="Superman"></hero-detail> 
 
</div> 
 

 
</body> 
 
</html>

スニペット使用=結合。

angular 
 
     .module('client', []) 
 
     .component('testComponent', { 
 
      template: '<h1>{{$ctrl.param}}</h1>', 
 
      controller: function() { 
 
       // this.param = '123'; 
 
      }, 
 
      bindings: { 
 
       param: '=' 
 
      } 
 
     }) 
 
     .component('heroDetail', { 
 
      template: '<span>Name: {{$ctrl.hero}}</span>', 
 
      controller: function() {}, 
 
      bindings: { 
 
       hero: '=' 
 
      } 
 
     });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 

 
    <title>AngularJS Example</title> 
 

 
    <!-- AngularJS --> 
 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> 
 

 
</head> 
 
<body> 
 

 
<div ng-app="client" ng-init="testParam= 'Test123'; testHero='Superman'"> 
 
    Test 
 
    <test-component param = "testParam"> </test-component> 
 
    <hero-detail hero="testHero"></hero-detail> 
 
</div> 
 

 
</body> 
 
</html>

出典

2016-12-04 04:10:48 Toddsden

AngularJSコンポーネント：= bindingを使用してパラメータを渡す

答えて

関連する問題