HTML Question
Angular JS 1.5 Component html content shown as commented out in browser
I am new to the Angular world, and while trying out a few things, I am basically stuck with a basic angular component problem.
So the idea is to simply add a custom element called "cast-tile" to the page which would be loaded by angular as a component. But the browser somehow shows the code in ng-repeat as commented.
My code is below
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<h1>My Favourite X-Men's</h1>
<sample-component data="Jack"></sample-component> <!-- this works -->
<cast-tile cast="mutants"></cast-tile> <!-- does not work -->
</body>
</html>
Script.js
var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.mutants = [{
name: 'Wolverine',
actor: 'Hujh Jackman',
image: 'https://i.pinimg.com/originals/0e/a3/3b/0ea33b4fc6e96eb684d6eb9f9f66482d.jpg'
},
{
name: 'Cyclops',
actor: 'James Marsden',
image: 'https://vignette.wikia.nocookie.net/xmenmovies/images/d/d3/Cyclops_04.jpg/revision/latest/scale-to-width-down/350?cb=20140330215941'
},
{
name: 'Storm',
actor: 'Hally Barry',
image: 'https://vignette.wikia.nocookie.net/xmenmovies/images/a/a7/Storm_xmen3.JPG/revision/latest?cb=20120128061314'
}];
});
myApp.component("castTile", {
templateUrl: "myTemplate.html",
bindings: {
cast: '='
},
restrict: 'E',
controller: function(){
}
});
myApp.component("sampleComponent", {
template: '<h3>Hello {{ $ctrl.data }}</h3>',
bindings: {
data: '@'
},
restrict: 'AE'
});
and finally, myTemplate.html
<div class="tiles" ng-repeat="mutant in mutants">
<h3>{{ mutant.name }}</h3>
<p>{{ mutant.actor }}</p>
<img width="100" height="150" ng-src="{{ mutant.image }}" />
</div>
The browser console does not show any errors.
Please find the code on Plunker
Any help is greatly appreciated!
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
Answer Source
Well, the binding that contains mutants list is called cast in your component castTile. Also, you need to prefix cast with $ctrl., as you correctly did it in sampleComponent:
<div class="tiles" ng-repeat="mutant in $ctrl.cast">
should work ;-)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download