2013-06-26 6 views
1

replace 속성을 true로 설정하면 브라우저가 손상됩니다. 다음은 엄청난 링크입니다. http://plnkr.co/edit/9pXdDGo4ccxljwIo3NN0 무엇이 문제입니까?지시어 대체 옵션을 사용하는 Angularjs

index.html을

<!doctype html> 
<html ng-app="cvApp" ng-cloak> 
<head> 
    <meta charset="utf-8" /> 
    <title> 
     Mixing Static And Dynamic Options In An AngularJS Select Menu 
    </title> 
</head> 
<body ng-controller="ctrl"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> 

<script type="text/javascript" src="script.js"></script> 


    <div radios selected-option="selectedOption" option-list="optionList" name="ms"> 
</body> 
</html> 

radios.html

<label data-ng-repeat="opt in optionList" class="radio inline"> 

    <input type="radio" name="{{name}}" ng-model="selectedOption" ng-value="opt" /> 
    {{opt.name}} 
</label> 

script.js

 var cvApp = angular.module('cvApp',[]); 

    cvApp.controller('ctrl', function ($scope) { 
     $scope.optionList=[{name:"evli",value:1},{name:"bekar",value:2}] 
     $scope.selectedOption=$scope.optionList[0]; 
    }); 

cvApp.directive("radios", function() { 
    return { 
     restrict: "A", 
     //replace:true, 
     templateUrl: 'radios.html', 
     scope: { 
      selectedOption: "=", 
      optionList: "=", 
      name:"@" 
     } 
    }; 
}); 
+0

당신이 여기에 코드를 추가 할 수하십시오

해결 방법은 또 다른 "진짜"루트 요소 안에 당신에게 label 태그를 래핑하는 것입니다? 브라우저가 정지되고 코드를 읽을 수없는 경우 무엇이 잘못되었는지 검사하는 것은 어렵습니다. – Narretz

답변

2

귀하의 지시 템플릿은 루트 템플릿에 대 한 요소이지만 같은 label 태그를 정의 label 태그는 복수의 루트를 생성하는 ng-repat 지시어도 사용합니다 요소가 실행될 때. 루트 DOM 노드가없는 지시문 템플릿의 문제는 ticket에서 다루어집니다.

<div> 
    <label data-ng-repeat="opt in optionList" class="radio inline"> 
    <input type="radio" name="{{name}}" ng-model="selectedOption" ng-value="opt" /> 
    {{opt.name}} 
    </label> 
</div> 
관련 문제