0

私は単純な角度のラジオ・グループ・ディレクティブを作成しようとしています。選択されたオプションをバインドするために、コンポーネントに文字列の配列、id、および属性が渡されます。私は私のコードを実行すると、私はここに次のエラー角度カスタム指令.matchは関数ではありません

angular.js:13642TypeError: a.match is not a function

を取得し、私が持っているものです: app.js:

angular.module('atp', []) 
.directive('appform', require('./application-directive')) 
.directive('radioGroup', require('./radio-group/radio-group-directive')) 
.directive('yesNoRadioGroup', require('./radio-group/yes-no-radio-group-directive')); 

ラジオグループdirective.js:

function RadioGroupDirective(){ 
    return{ 
     restrict:'E', 
     transclude:true, 
     template:require('./radio-group-template.html'), 
     replace:true, 
     scope:{ 
      id:'=', 
      selected:'=', 
      options:'=' 
     } 
    } 
} 
module.exports = RadioGroupDirective; 

radio-group-template.html:

<div> 
    <label for="{{radioGroupId}}"><ng-transclude></ng-transclude></label> 
    <fieldset id="{{radioGroupId}}"> 
     <div ng-repeat="option in optionsArray track by $index"> 
      <label for="{{radioGroupId}}-{{$index}}">{{option}}</label> 
      <input id="{{radioGroupId}}-{{$index}}" type="radio" value="option" ng-model="selectedOption"> 
     </div> 
    </fieldset> 
</div> 

はい-NO-ラジオグループdirective.js:

function YesNoRadioGroupDirective() { 
    return { 
     restrict: 'E', 
     transclude:true, 
     template: require('./radio-group-template.html'), 
     replace: true, 
     scope: { 
      RadioGroupId: '=', 
      selectedOption: '=', 
      optionsArray: ['Yes', 'No'] 
     } 
    } 
} 
module.exports = YesNoRadioGroupDirective; 

用法:

<form> 
    <yes-no-radio-group radio-group-id="test" selected-option="Controller.Form.SelectedYesNo">Select Yes or No:</yes-no-radio-group> 
    <radio-group radio-group-id="test-radio" options-array="['Hello World','Some Other Option']" selected="Controller.Form.SelectedYesNo">Select one of the options:</radio-group> 
</form> 
+0

'template'は、文字列を返す必要がありますを必要とする必要はありません。 'require'の必要はありません。 templateUrlを使用して、角度でそれを取得します – charlietfl

+0

下記の私のコメントを参照してください。テンプレートが問題ではありません。必要に応じてテンプレートに直接変換します: "

...
" –

+0

スタックトレースのどこでエラーが発生しましたか? – charlietfl

答えて

0

は、なぜあなたはこれをやっていますか?最初instanceで必要と第二に、あなたがHTMLを必要としている場合、uはtemplateUrl代わりのテンプレート

template:require('./radio-group-template.html'), 
+0

私はウェブパックとhtml-loaderを使用しています。 require( '* .html)はファイルを文字列としてロードします。 https://github.com/webpack/html-loader –

関連する問題