Question

我有一个名为crust的自定义指令： JS：

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

HTML模板(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>

模型（crustTypes）是通过此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"
    }]
}

该指令正在HTML中调用，如下所示：

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

循环工作正常，ng-repeat正确呈现列表。问题是我想将datasource.id指定为无线电组的通用名称，并且由于某种原因，datasource.id即将出现未定义。因此，未分配名称，并允许用户输入多个选项。

如果我将type传递给updatePizza(item)，那么就可以了。它只是未显示的父模型

如果我尝试通过datasource返回updatePizza()，那么它仍然是未定义的。

我确定我错过了一些基本的东西。救命啊！

以下是代码的Plunker

Answer 1

将name="{{datasource.id}}"替换为name="{{$parent.datasource.id}}"

AngularJS自定义指令范围没有反映

1 个答案: