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>
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'
});
<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>
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 ;-)