Menu
I am trying to pass parameters to an AngularJS Component (Angular 1.5). But, I am not able to access them in the Component. Can anyone tell me what's wrong with the code?
http://jsbin.com/fopuxizetu/edit?html,js,output
846
In the first snippet, I replaced the binding with @ so that it takes values. If you use the = binding it expects you to pass in variables.
In the second snippet I used the = binding but created variables using 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>Snippet using = binding.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
