Install button still not showing up

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.

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.

1 Like

I’m getting the same problem. Anyone else?

1 Like

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.

9 Likes

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.

4 Likes

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:)

2 Likes

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 :slight_smile:

1 Like

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

};
});

Very mysterious isn’t it?

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

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

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.

Reloading worked for me:)

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

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

I changed the index.html but the problem persists.

Then I don’t know what to do.

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

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

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!

2 Likes