Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <link href="demo.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
  <meta charset=utf-8 />
  <title>Demo</title>
</head>
<body ng-app="app" ng-controller="CartCtrl">
  <h2>{{cartName}}</h2>
  <button add-to-cart product-id="productId">Add to cart</button>
</body>
</html>
 
var module = angular.module('app', [])
.controller('CartCtrl', function($scope, cartService){
  $scope.cartName = "My Cart"; 
  $scope.productId = 123; 
  $scope.addItem = function(productId){
    cartService.addProductId(productId); 
  };
})    
.factory('cartService', function(){
  var products = []; 
  return {
    addProductId : function(productId){
      products.push(productId); 
    }
  };
})
.directive('addToCart', function(cartService){
  function link($scope, element, attrs){
    $scope.$watch('productId', function(value){
      if(value){
      cartService.addProductId(value);
      }
    });
​
  }
  return {
    scope : {
    productId : "="
  },
    restrict: 'AE', 
    link : link 
  };
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
xsurge83pro
0viewers