0

I'm trying to do something similar to this fiddle.

What I expect to happen is that a select list is displayed and when one of the options is selected the word true or false is displayed on this line of code:

<span data-ng-bind="cardType.transactionFee"></span>

The $watch part of it is working as the alert that says hey, cardType has changed! is displayed whenever the card type changes.

How can I pass the changed values to the directive?

.controller('AddCreditCardChargeCtrl', ['$scope', function($scope) {
  $scope.creditCards = [
      { name: 'VISA DEBIT/DELTA', value: 'DEL', transactionFee: false},
      { name: 'VISA CREDIT', value: 'VIS', transactionFee: true },
      { name: 'MASTERCARD CREDIT', value: 'MSC', transactionFee: true },
      { name: 'MASTERCARD DEBIT', value: 'MCD', transactionFee: false },
      { name: 'MAESTRO', value: 'MAE', transactionFee: false },
      { name: 'SWITCH', value: 'SWI', transactionFee: false },
      { name: 'VISA ELECTRON', value: 'ELC', transactionFee: false },
      { name: 'SOLO', value: 'SOL', transactionFee: false }
  ];

    $scope.selectAction = function() {
       alert($scope.creditCardModel);
       alert(hasTransFee($scope.creditCardModel));
       $scope.cardType=hasTransFee($scope.creditCardModel);
      // console.log(cardType.name)
      // console.log(cardType.transactionFee)
       console.log('watch')
       $scope.$watch("cardType.transactionFee", function() {
                    alert('hey, cardType has changed!');
         });
    }

  var hasTransFee = function(cardType) 
  {
   for (var i=0; i < $scope.creditCards.length; i++) {
      if($scope.creditCards[i].value==cardType && $scope.creditCards[i].transactionFee == true){
       return true;   
      }
    }
    return false;
  }
}])

.directive('bhtDiscountPrice',['BasketFactory',
function(BasketFactory){
return{
    restrict:'EA',
    scope:true,
    link:function(scope,elem,attrs){},

    template:'<span data-ng-bind="cardType.transactionFee"></span>'
  }
}])
user1532669
  • 2,288
  • 4
  • 36
  • 72

1 Answers1

0

scope: false, so no new scope at all,thus you will be share scope with controller

Note

for best way of using scope when you write custom directive please have a look When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?

Edit:

try this ,without using link function

 .directive('bhtDiscountPrice',['BasketFactory',
function(BasketFactory){
      return {
        restrict: 'EA',
        scope: true,
        template:'<span data-ng-bind="cardType.transactionFee"></span>'
      };
    });
Community
  • 1
  • 1
Kostia Mololkin
  • 868
  • 9
  • 25