user1494625 user1494625 - 1 year ago 102
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="[email protected]" 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!

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