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组件：使用=传递参数

回答

相关问题