CODEWITHSUNDEEP
angularjsangularjs-directivescope
nikjohn
nikjohn

Reputation: 21880

AngularJS custom directive scope not reflecting

I have a custom directive called crust: JS:

 .directive('crust', function(){
                return{
                    restrict: 'EA',
                    replace: true,
                    scope: {       
                      datasource: '=' 
                    },
                    templateUrl: '../../configurator/partials/crust.html'
                }
            })

HTML template (crust.html):

<li data-ng-repeat="type in datasource.types">
  <input type="radio" 
    name="{{datasource.id}}" 
    data-ng-class="radio-selector" 
    data-ng-true-value="true" 
    value="true" 
    data-ng-model="type.selected" 
    data-ng-change="updatePizza(type)" 
    id="{{type.id}}">
  <label for="{{type.id}}"> <span></span>
    <h2 data-ng-bind="type.name"></h2>
    <p data-ng-bind="type.description"></p>
  </label>
</li>

The Model (crustTypes) is pulled via a service from this JSON:

{
    "id": "crt",
    "types": [{
        "id": "crt1",
        "name": "original",
        "description": "Our traditional scratch-made crust",
        "price": "5",
        "selected":"false"
    }, {
        "id": "crt2",
        "name": "thin",
        "description": "A light crispier crust",
        "price": "6",
        "selected":"false"

    }, {
        "id": "crt3",
        "name": "fresh pan",
        "description": "A thick buttery crust",
        "price": "7",
        "selected":"false"
    }, {
        "id": "crt4",
        "name": "stuffed",
        "description": "Two layers of original crust",
        "price": "8",
        "selected":"false"
    }]
}

The directive is being invoked in the HTML like so:

<ul>
 <crust data-datasource="crustTypes" data-datavalue="pcrustType"></crust>
</ul>

The looping is working fine, and ng-repeat is rendering the list properly. The problem is that I want to assign datasource.id as the common name of the radio group, and due to some reason, datasource.id is coming up as undefined. Consequently, the name is not being assigned and the user is being allowed to enter multiple selections.

If instead I pass type to updatePizza(item) it comes up fine. Its just the parent model that's not being displayed

If I try to return datasource through updatePizza(), it is still coming up as undefined.

I'm sure I'm missing something basic here. Help!

Here is a Plunker of the code

Upvotes: 0

Views: 46

Answers (1)

Ali
Ali

Reputation: 1085

Replace name="{{datasource.id}}" with name="{{$parent.datasource.id}}"

Upvotes: 1

Related Questions