2014-02-28 138 views
0

在我的Razor視圖我有一個表,如下所示:如何使用角度指令範圍

<form> 
    <table class="table"> 
     <thead><tr> 
        <th>Artist Name</th> 
        <th>Track Title</th> 
        <th>Version</th> 
        <th>Track Duration</th> 
        <th>Recording Year(20xx)</th> 
        <th></th> 
       </tr> 
     </thead> 
     <tbody> 
      <tr isrcrow> </tr> 

     </tbody> 

這裏是「isrcrow」

isrcorderapp.directive "isrcrow",() -> 
    restrict:'A' 
    template: '<td><input id="artist" ng-model="artist"/></td> 
       <td><input id="title" ng-model="title"/></td> 
       <td><select id="isrctype" ng-model="isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td> 
       <td><input id="duration"/></td> 
       <td><input id="year"/></td> 
       <td><input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" /> 
        <input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" /> 
       </td>' 
    replace: false 
    scope: 
     name:'=' 
     ng-options='' 

    link: (scope,element,attr) -> 

isrcorderapp.controller "isrcorders", ($scope,$http) -> 
    $scope.recordingTypes = [ 
     {type:'A'} 
     {type:'B'} 
     {type:'C'} 
     {type:'D'} 
     {type:'E'} 
     ] 

指令當表呈現它不填充選擇列表。

問題可能是範圍屬性。

應該如何模板的這一部分的範圍之refered: NG選項=「s.type對於s在recordingTypes」類=「NG-原始NG-有效」

我不清楚上何時使用=或@

+0

你是不是分配控制器的指令,對於初學者。控制器:'isrcorders' –

+0

您的指令中的範圍屬性似乎沒有任何操作(ng-options聲明格式錯誤)。我根本看不到你需要他們的地方,我錯過了什麼? –

+0

我是新來的角.how我會做那 – Milligran

回答

0

我把你的原代碼放到了一個笨蛋。控制器沒有在指令中指定(除非它在DOM中更高的地方?)。根據我的說法,指令中的隔離範圍不是必需的,可以刪除。

http://plnkr.co/edit/smL8FX6hmUAqSrXjOlSj?p=preview

<tbody> 
    <tr isrcrow> </tr> 
</tbody> 

var isrcorderapp = angular.module('plunker', []); 

isrcorderapp.directive("isrcrow", function(){ 
    return { 
    restrict:'A', 
    controller: 'isrcorders', 
    template: '<td><input id="artist" ng-model="artist"/></td>\ 
       <td><input id="title" ng-model="title"/></td>\ 
       <td><select id="isrctype" ng-model="isrctype" ng-change="setState(state)" ng-options="s.type for s in recordingTypes" class="ng-pristine ng-valid"></select></td>\ 
       <td><input id="duration"/></td>\ 
       <td><input id="year"/></td>\ 
       <td><input type="button" value="Add ISRC" onclick="AddIsrc()" class="btn btn-small btn-success" />\ 
        <input type="button" value="Delete" onclick="RemoveIsrc()" class="btn btn-small btn-danger" />\ 
       </td>', 
    replace: false 
    } 
}); 

isrcorderapp.controller("isrcorders", function($scope,$http) { 
    $scope.recordingTypes = [ 
     {type:'A'}, 
     {type:'B'}, 
     {type:'C'}, 
     {type:'D'}, 
     {type:'E'} 
     ]; 
});