AngularJS custom directive scope not reflecting

Question

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

I'm passing it back to the controller, and in the updatePizza(item) function, console.log($scope.datasource) says undefined but if instead I pass type to updatePizza(item) it comes up fine. Its just the parent model that's not being displayed — nikjohn
– nikjohn, Commented Oct 7, 2015 at 21:29
OK, I thought it might be an issue with Angular 1.2.x, but it wasn't. Could you post a plunk of this and I can take a look at it? — Caleb Williams
– Caleb Williams, Commented Oct 7, 2015 at 21:40

Ali · Accepted Answer · 2015-10-08 08:00:00Z

1

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

answered Oct 8, 2015 at 8:00

Ali

1,0959 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

AngularJS custom directive scope not reflecting

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