Exercise 7. installApp III

#1

I don't understand how we wirite de html code for implement the tag

#2

In my case I insert 

<div class="card" ng-repeat="app in apps">
          <app-info info=app></app-info> 
           <install-app></install-app>
        </div>

but canot see the button

#3

Problem solved.
it comes from the brackets and ";".

My installApp.js

app.directive('installApp', function() { 
  return { 
    restrict: 'E', 
    scope: {      
    }, 
    templateUrl: 'js/directives/installApp.html',
    link: function(scope, element, attrs) { 
  scope.buttonText = "Install", 
  scope.installed = false, 
  scope.download = function() { 
    element.toggleClass('btn-active'); 
    if(scope.installed) { 
      scope.buttonText = "Install"; 
      scope.installed = false; 
    } else { 
      scope.buttonText = "Uninstall"; 
      scope.installed = true; 
    } 
  }   
  }
  };});
#4

I don't understand why it is "info=app" and not "info=apps"?

Aren't we accessing $scope.apps??

It works when I use info=app but to me it doesn't make sense....

This is in the MainControl.html

$scope.apps = [
{
icon: 'img/move.jpg',
title: 'MOVE',
developer: 'MOVE, Inc.',
price: 0.99
},
{
icon: 'img/shutterbugg.jpg',
title: 'Shutterbugg',
developer: 'Chico Dusty',
price: 2.99
},
{
icon: 'img/gameboard.jpg',
title: 'test 1',
developer: 'Mr.Man 1',
price: 4.55
},
{
icon: 'img/gameboard.jpg',
title: 'test 2',
developer: 'Mr.Man 2',
price: 3.44
}
];

#5

what changes you made? I m also facing same issue.

#6

I still don't understand

#7

Hi Tommy,

I think when you use info= app is one app in array apps. and if you use apps u must re-define html in app-info.html

#8

I get an error while using the same code can u help me out

#9

try this.





<!-- Include the AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>





App Market



<div class="main" ng-controller="MainController">
  <div class="container">
    
    <div ng-repeat="app in apps" class="card">
			<app-info info="app"><install-app> </install-app></app-info>

			</div>

    <div class="card">
			<app-info info="move"><install-app> </install-app></app-info> 
			</div>
    <div class="card"> 
			<app-info info="shutterbugg"><install-app> </install-app></app-info> 
			</div>
    <div class="card"> 
			<app-info info="gameboard"><install-app> </install-app></app-info> 
			</div>
    <div class="card"> 
			<app-info info="forecast"><install-app> </install-app></app-info> 
			</div>


  </div>
</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<script src="js/directives/appInfo.js"></script>

<!-- Directives -->
<script src="js/directives/installApp.js"></script>