Skip to content

Instantly share code, notes, and snippets.

@kvedantmahajan
Last active October 11, 2015 21:27
Show Gist options
  • Save kvedantmahajan/5eaff5b7406b154bfa27 to your computer and use it in GitHub Desktop.
Save kvedantmahajan/5eaff5b7406b154bfa27 to your computer and use it in GitHub Desktop.
Install Buttons not working
var app = angular.module('AppMarketApp', []);
<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>
app.directive('appInfo', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'js/directives/appInfo.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>
<button class="btn btn-active" ng-click="download()">
{{ buttonText }}
</button>
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(){
elelemnt.toggleClass('btn-active');
if(scope.installed){
scope.buttonText = "Install";
scope.installed = false;
}
else{
scope.buttonText = "Uninstall";
scope.installed = true;
}
}
}
};
});
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
}
];
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment