Can't see my button but i pass?


#1

So i pass the exercise, but i can't see my install/uninstall button

installApp.html

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

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

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>
  </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"></app-info>
           
           <install-app></install-app>
           
        </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>

I foud some people had similar issues caused by addblock, but i disabled that and still can't see the button.

Thanks in forehand


#2

Facing the same problem for me too.
I also have a syntax error at the end of function download and then i changed the function like this:

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

The error was gone but no buttons displayed


#3

Same problem. Did you eventually figure it out? This is why codecademy sucks. I've had numerous episodes where I got passed and the right results didn't show.


#4

I'm also facing the same issue.The buttons don't show up and the error message is always there no matter what you do.I'm just progressing without getting the actual results.


#5

AngularJS is case-Sensitive. Change templateURL to templateUrl

app.directive("installApp", function(){
  return {
    restrict: 'E',
    scope: {},
    link: function(scope,attrs,element) {
      	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;
    		}
      };
    },
    templateUrl: 'js/directives/installApp.html'
  };
});

That worked for me..


#6

i am also facing same problem(button didn’t display). please help