Install button still not showing up


#1

I am in the Directives section on lesson eight. The code runs and passes with out error, but the install button still isn't there. I have tried lots of variations on the code, but nothing seems to make the install button show up.

Still can't get to work. I have submitted a bug report.


#2

I'm having the same problem. Code passes all tests. I've looked up other's solutions and they are the same as mine but the install still isn't showing up.


#3

I'm getting the same problem. Anyone else?


#4

I was having the same problem, but after moving on to the next project, I realized that in the installApp.js file, I was capitalizing 'URL' in the 'templateUrl' property. I don't know if any of you might be having the same problem, but changing 'URL' to 'Url' did make my code work. Hope it helps.


#5

Every little mistake may cause the install button doesn't show up successfully.
I have an redundant semicolon in my InstallApp.js but my code passes the examination.
I think it's difficult to find out such mistakes.


#6

Even if you did all the things right it may won't work properly.
I had same problem but solved it just by reloading browser's page.

(sorry for my bad English. Not my native :sweat_smile:)


#7

I had the same issue, but was lacking a } brace. Remember, the download() function is inside of the link function! I forgot about the link when I was creating the braces, so I was missing one :smile:


#8

I'm getting the same too. Used the code supplied from the get help option, but the install button is still not showing.

Can anyone post working code for this? Thanks

I have the following:

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

};
});


#9

Very mysterious isn't it?


#10

Show me your code (.html and .js), because I did the entire course and have no problems.


#11

Here is my code:

index.html:

<!doctype html>
<html>
<head>
<link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<!-- Include the AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="installApp.js"></script>
</head>
<body ng-app="AppMarketApp">
<div class="header">
<div class="container">
<h1>App Market</h1>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="card" ng-repeat="app in apps">
<app-info info="app">
<install-app></install-app>
</app-info>
</div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
<!-- Directives -->
<script src="js/directives/appInfo.js"></script>
<script src="js/directives/installApp.js"></script>
</body>
</html>

app.js:

var app = angular.module('AppMarketApp', []);

MainController.js:

app.controller('MainController', ['$scope', function($scope) {
$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: 'Gameboard',
developer: 'Armando P.',
price: 1.99
},
{
icon: 'img/forecast.jpg',
title: 'Forecast',
developer: 'Forecast',
price: 1.99
}
];
}]);

appInfo.html:

<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p>

appInfo.js:

app.directive('appInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/appInfo.html'
};
});

installApp.html:

<button class="btn btn-active" ng-click="download()">{{ buttonText }}</button>

instalApp.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;
}
}
}
};
});


#12

index.html

<head>
    ...
    <script src="installApp.js"></script>
    ...
</head>

That shouldn't exists in the file, because you insert it at the end of <body> (which you did OK, and with the correct src).

I didn't find anything different from my code, so if that isn't the error, something weird is happenning.


#13

Reloading worked for me:)


#14

Hello guys!

The install button is displayed to me, but the text does not change to 'uninstall' when I click on it. What could be the problem?
Thanks


#15

See reply #11, file installApp.js. Maybe you aren't setting the text, of your scope.installed is wrong.


#16

I changed the index.html but the problem persists.


#17

Then I don't know what to do.


#18

Removing semicolons made my buttons show up. Thanks for the hint.


#19

If it's not going to work I will just come back later and see if waiting a while helps.


#20

In your index.html you have your angular elements wrongly embedded into each other:

<app-info info="app">
<install-app></install-app>
</app-info>

The elements should be below each other. Correct is:

<app-info info="app"></app-info>
<install-app></install-app>

This made my code work. Cheers & happy new year!