ng-repeat影響了錯誤的地方

我在AngularJS中編寫了一個名爲fRadioButton的自定義指令。據我所知，ngRepeat指令會影響它使用的標籤。但在我的情況下，ngRepeat表現奇怪。下面是詳細信息：ng-repeat影響了錯誤的地方

我的指令模板：

<label> 
     <input type="radio" value="fValue"/> 
     {{fName}} 
</label>

我的指令的JavaScript文件：

directivesModule.directive('fRadioButton', function() { 

    return { 
     restrict: 'EA', 
     replace: true, 
     scope: { 
      fName: '@', 
      fValue: '=' 
     }, 
     transclude: false, 
     templateUrl: '/directives/f-radio-button.html' 
    }; 
});

我使用該指令從任何頁面如下：

<f-radio-button ng-repeat="period in myCtrl.periods track by $index" 
    f-name="period.name" f-value="{{$index}}""></f-radio-button>

根據對於ngRepeat，我期望生成的HTML格式如下：

<label></label> 
<label></label> 
<label></label> 
<label></label>

然而，如下它產生：

<label> 
    <f-radio-button></f-radio-button> 
    <f-radio-button></f-radio-button> 
    <f-radio-button></f-radio-button> 
    <f-radio-button></f-radio-button> 
</label>

我怎麼能直接複製與ngRepeat標籤標籤？我已經用replace=false試過了，但它也沒有工作。我想replace=true運行之前ng-repeat。有沒有辦法在replace=true之前運行ng-repeat？

來源

2016-04-25 Faruk Yazıcı

這是不可能的，你描述的東西。您發佈的代碼無法生成此HTML。 – dfsq

@dfsq是不是有可能使ngRepeat也是一個參數並傳遞給指令？ ngRepeat中的表達式既不是字符串，對象也不是方法。所以我想我也不能通過它。 –

你可以傳遞數組裏面的指令。看看我的答案。 – dfsq

你可以傳遞一個數組到你的指令，並呈現無線電項目裏面：

.directive('fRadioButton', function() { 

    return { 
    restrict: 'EA', 
    replace: true, 
    scope: { 
     model: '=ngModel', 
     options: '=', 
     fName: '@', 
     fValue: '@' 
    }, 
    template: function(element, attrs) { 
     return '<div> {{model}}' + 
     '<label ng-repeat="option in options">' + 
     ' <input type="radio" ng-model="$parent.model" ng-value="{{ option.' + attrs.fValue + ' }}" name="' + attrs.name + '" />' + 
     ' {{option.' + attrs.fName + '}}' + 
     '</label></div>' 

    } 
    }; 
});

然後，你可以使用這樣的：

<f-radio-button options="myCtrl.periods" ng-model="selected" f-name="name" f-value="id"></f-radio-button>

下面是一個簡單的演示：

演示：http://plnkr.co/edit/Xcvt46ljV58513saq7BC?p=info

來源

2016-04-25 17:40:36 dfsq

ng-repeat重複的一切，是你把它連接到

<div ng-repeat="period in myCtrl.periods track by $index"> 
    <f-radio-button f-name="period.name" f-value="{{$index}}"></f-radio-button> 
</div>

編輯或者裏面的元素

myApp.directive('fRadioButtons', function() { 
    return { 
     restrict: 'EA', 
     replace: true, 
     scope: { 
      periods: "=" 
     }, 
     template: '<label ng-repeat="period in periods"><input type="radio" f-name="{{period.name}}" value="{{$index}}"/>{{period.name}}</label>' 
    }; 
}); 

function MyCtrl($scope) { 
    $scope.periods = [{name: "foo"}, {name: "bar"}, {name: "foobar"}]; 
}

http://jsfiddle.net/Lvc0u55v/3010/

來源

2016-04-25 16:40:21 Ozrix

ng-repeat影響了錯誤的地方

回答

相關問題