2013-11-26 54 views
0

屬性我有一個指令:AngularJS transclude HTML內部指令

.directive("radio", function() { 
     return { 
      restrict: "EA", 
      replace: true, 
      scope: { text: "@", name: "@", value: "&" }, 
      template: '<label class="radio" for="{{name}}">\ 
        <span class="icons">\ 
         <span class="first-icon fui-radio-unchecked"></span>\ 
         <span class="second-icon fui-radio-checked"></span>\ 
        </span>\ 
        <input type="radio" id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" />\ 
        <span ng-bind="text"></span>\ 
       </label>', 
      link: function (scope, el) { 
       scope.value = false; 
       scope.$watch("value", function (value) { 
        value ? el.addClass("checked") : el.removeClass("checked"); 
       }); 
      } 
     }; 
    }) 

現在我用它喜歡:

<radio name="test" value="testvalue"></radio> 

我不喜歡添加範圍變量,每次我要添加東西,這將是很好,如果我可以這樣做:

<radio id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" required></radio> 

而且具有HTML結果將是:

<label class="radio" for="{{name}}"> 
    <span class="icons"> 
     <span class="first-icon fui-radio-unchecked"></span> 
     <span class="second-icon fui-radio-checked"></span> 
    </span> 
    <input type="radio" id="{{name}}" name="{{name}}" value="{{value}}" ng-model="value" required /> 
     <span ng-bind="text"></span> 
</label> 

回答

0

鏈接功能有一個attrs變量,它表示指令標記中的屬性。您可以使用它並將數據插入必要的標籤。但是,如果沒有範圍變量,你將無法完成2way綁定。