My code in 7/8 does not display the button


#1

Hi, I can not identify where I am missing in exercise 7/8. My button does not display.

This is my installApp.html:

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

This is my index.html:

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

And this is 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;
        }
    }
  }
});

#2

change to scope.installed = true;

single equal


#3

Should anything be added to the "<install-app>" element? my code is written as instructed but the button doesn't display. I don't see a way to debug this. thanks.


#4

My button wouldn't display until I moved my
<script src="js/directives/installApp.js"></script>
to the bottom of index.html under the comment that says "Directives". I had it at the top before and that was dumb. Hope this helps someone!


#5

I am using a Chromebook, and experienced the same problem. I discovered that the "Install" button would not toggle if the browser window was at 100% zoom or greater. Once the browser widow is reduced to 90% or less, the "Install" button will toggle correctly. I have submitted a bug report for this issue.


Exercise 7 will not display button if you have adblockers enabled
#6

I found that the lesson gave incorrect code.

In the function of the installApp directive, it did not include a semi-colon at the end of the return statement.

In the function of the link, since it is a function and not an object+properties, the lines should end in semi-colons... not commas. Here is the correct code that got me through the lesson.

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