2014-02-28 59 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'} 
     ]; 
});