Angularjs使用指令替換選項

當我將replace屬性設置爲true時，瀏覽器崩潰了。這裏是plunker鏈接：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:"@" 
     } 
    }; 
});

來源

2013-06-26 seyfside

你能在這裏添加代碼嗎？當瀏覽器凍結並且無法讀取代碼時，很難檢查出現問題。 – Narretz

你的指令模板label標籤定義爲根元素的模板，但你標籤標籤也使用ng-repat指令創建多個根元素執行時。指令模板沒有根DOM節點的問題在此ticket中解決。

解決方法是換你label標籤另一種「真正的」根元素裏面：

<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>

來源

2013-06-26 11:02:46 Stewie

Angularjs使用指令替換選項

回答

相關問題