How to get the name of model passed into the function in AngularJS?

Question

I have a scenario where i need to know the value and name of model passed in to the function.

I tried the following

$scope.rad='fff';

app.directive('kmRadio', function() {
  return{
    restrict:'E',
    compile: function(element,attrs) 
    {
      var model = {l:''};
      model.l = attrs.kmModel;
      var str1="n in ";
      var str2=attrs.kmOption;
      var repeat=str1.concat(str2);
      var htmlText='<div><div ng-switch on="format">'+
            '<div ng-switch-when="kmForm">'+
            '<div>'+
            '<div class="floatLeft">'+
            ''+attrs.title+''+
            '</div>'+
            '<ul>'+
            '<li class="rowlist" ng-repeat="'+repeat+'">&nbsp;{{n}}<input type="radio" ng-model="'+attrs.kmModel+'" name="a"  ng-click="radioValueChanged(n,'+attrs.kmModel+')"/></option>'+
            '</ul>'+
            '{{'+attrs.kmModel+'}}'+
            ''+attrs.kmModel+''+
            ''+model.l+''+
            '</div>'+
            '</div>'+
            '<div ng-switch-when="kmPreview">'+
            '<div>'+attrs.title+'<input type="radio" ng-model="'+attrs.kmModel+'" disabled="true"/></div>'+
            '</div>'+
            '</div></div>';
            element.replaceWith(htmlText);
    }
  }
})

The following code is responsible for calling the function

'<li class="rowlist" ng-repeat="'+repeat+'">&nbsp;{{n}}<input type="radio" ng-model="'+attrs.kmModel+'" name="a"  ng-click="radioValueChanged(n,'+attrs.kmModel+')"/></option>'+



$scope.radioValueChanged = function (value,model) {
    //alert("Changed value"+value + model);
    alert(value +" and " + model);
    //alert("model "+ model );
}

In HTML , i have a code like below

    <km-radio km-model="rad" title="Gender" km-option="['De','CM','PM']"></km-radio>

When i tap on radio button in html, i am getting the o/p De and fff, but what i need is o/p De and rad

See the plunker code and check the directive kmRadio

Answer 1

I rewrote your directive to get the binding from the attributes parameter of the link function:

app.directive('kmRadio', function($parse) {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'kmRadio.html',
    scope: true, 
    link: function(scope, element, attr) {
      scope.kmModel = scope.$eval(attr.kmModel);
      scope.binding = attr.kmModel;
      scope.title = attr.title;
      scope.kmOption = scope.$eval(attr.kmOption);
    }
  }
})

where kmRadio.html is:

<div>
  <div ng-switch on="format">
    <div ng-switch-when="kmForm">
      <div>
        <div class="floatLeft">{{title}}</div>
        <ul>
          <li class="rowlist" ng-repeat="n in kmOption">
             {{n}} <input type="radio" ng-model="$parent.kmModel" ng-click="radioValueChanged(n, binding)" ng-value="n"/>
          </li>
        </ul>
        bound to: {{binding}}, value: {{kmModel}} 
      </div>
    </div>
    <div ng-switch-when="kmPreview">
      <div>{{title}}
        <input type="radio" ng-model="kmModel" disabled="true" />
      </div>
    </div>
  </div>
</div>

Here is a working demo: http://plnkr.co/edit/2q8a8B4zNGpQ0C5V1x8D?p=preview