AngularJS와 내가 같은 각도 지침을 만들려고 해요 중첩 된 지침

Question

을 매개자.

---

formjs.js

var formjsModule = angular.module('hp.formjs', []); 

// Directive 
formjsModule.directive('radioButtonGroup', function() { 


    return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     dataModel: '@', 
     group: '@', 
     label: '@?' 

    }, 
    templateUrl: function (elem, attr) { 
     return 'formjs/radio/radio-group-tpl.html'; 
    } 

    } 
}).directive('radioButton', function() { 

    return { 
    restrict: 'E', 
    require: ['^radioButtonGroup'], 
    transclude: true, 
    scope: { 
     value: '@', 
     dataModel:'@', 
     group: '@' 
    }, 

    templateUrl: function (elem, attr) { 
     return 'formjs/radio/radio-item-tpl.html'; 
    } 

    } 


}); 

---

formjs/라디오/라디오 항목-tpl.html

<input type="radio" name="{{group}}" id="{{group+'_'+id}}" ng-value="value" ng-model="dataModel"/> 

:

본인은 다음을 작성했습니다 ,451,515,

---

formjs/라디오/무선 그룹 tpl.html {{라벨}} m : {{데이터 모델}}

내가 매개자 범위를 알고 있어요

<div class="col-sm-10" id="g_{{group}}" ng-transclude> 
    </div> 
</div> 

,하지만 난 돈 이 바인딩을 수행하는 우아한 방법을 알지 못합니다.

도움말, 제발!

Answer 1

지시어 여야합니까? 이것이 충분하지 않습니까?

// HTML template 
<div ng-repeat="option in options"> 
<input type="radio" ng-model="$parent.selected" ng-value="option"> {{ option }} 
</div> 
... 

// Controller 
$scope.selected = null; 
$scope.options = ['Radio one', 'Radio two', 'Radio three']; 

물론

---

, 당신이 주장하는 경우에, 당신은 그것을 지시 할 수 있습니다.

HTML에서 사용, options은 위와 같은 배열입니다.

<radio-group group-name="My group" 
      ng-model="selected" 
      options="options"></radio-group> 

실제 지시

app.directive('radioGroup', function() { 
    return { 
    restrict: 'E', 
    scope: { 
     groupName: '@', 
     options: '=', 
     ngModel: '=' 
    }, 
    template: '<legend>{{ groupName }}</legend>' + 
       '<div ng-repeat="option in options">' + 
       ' <input type="radio" ' + 
       '   ng-model="$parent.ngModel" ng-value="option"> {{ option }}' + 
       '</div>' 
    }; 
});