0

関数に渡されたモデルの値と名前を知る必要があるシナリオがあります。

私は次のことを試しました

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

次のコードは、関数の呼び出しを担当します

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

HTML には、以下のようなコードがあります

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

HTMLでラジオボタンをタップすると、o/p De と fffが表示されますが、必要なのはo/p De と radです

plunker コードを参照し、ディレクティブkmRadioを確認してください

4

1 に答える 1

1

リンク関数の属性パラメーターからバインディングを取得するようにディレクティブを書き直しました。

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

どこにkmRadio.htmlある:

<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>

これが実際のデモです: http://plnkr.co/edit/2q8a8B4zNGpQ0C5V1x8D?p=preview

于 2014-04-23T05:38:02.357 に答える