AngularJS組件：使用=傳遞參數

我想要傳遞參數給AngularJS組件（Angular 1.5）。但是，我無法在組件中訪問它們。任何人都可以告訴我代碼有什麼問題嗎？AngularJS組件：使用=傳遞參數

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

2016-12-04 MSK

它是治療你傳遞什麼到'param'和'hero'作爲變量名。你似乎期待他們被視爲價值觀。如果你想讓他們傳入值，應該使用'@'綁定。 – Toddsden

在第一片段中，我替換@以便它取值的結合。如果您使用=綁定，它期望您傳入變量。

在第二個片段中，我使用了=綁定，但使用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組件：使用=傳遞參數

回答

相關問題