Angularjs using directive replace option

Question

When I set the replace property to true the browser crashed. Here is the plunker link : http://plnkr.co/edit/9pXdDGo4ccxljwIo3NN0 What is the problem?

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:"@"
        }
    };
});

Can you add the code here please? It's hard to examine what's wrong when the browser freezes and you can't read the code. — Narretz
– Narretz, Commented Jun 26, 2013 at 9:35

Stewie · Accepted Answer · 2013-06-26 11:02:46Z

2

Your directive template defines a label tag as a root element for the template but your label tag also uses ng-repat directive which creates multiple root elements when executed. Issue with directive template not having a root DOM node is addressed in this ticket.

Workaround is to wrap you labeltag inside another "real" root element:

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

answered Jun 26, 2013 at 11:02

Stewie

60.4k20 gold badges148 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs using directive replace option

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related