在angularjs指令中使用ng-switch并在ng-grid cellTemplate中使用该指令

Question

我做了一个以下指令：

.directive('getData', function(){
        return {
            restrict: 'C',
            replace: true,
            transclude: true,
            scope: { myData:'@myData' },
            template: '<div ng-switch="myData">' +
                        '<div ng-switch-when="4">Real Data</div>' +
                        '<div ng-switch-when="5">False Data</div>' +
                        '<div ng-switch-default>No Data</div>' +
                      '</div>'
        }

然后在使用ng-grid的网格上，我有一个列有2行，值为4和5.我在cellTemplate中有以下列：

cellTemplate: ' < div class="getData" myData="{{row.getProperty(col.field)}}" />'

问题是行显示＆＃34;无数据＆＃34;。我想展示＆＃34; Real Data＆＃34;在具有值4和＆＃34;假数据＆＃34;的单元格上在有5的细胞上。

我做得不对？任何帮助将不胜感激。

Answer 1

在cellTemplate更改myData至my-data。使用角度指令时，角度库会自动将驼峰大小写转换为破折号。

例如，如果您将指令元素定义为"mySuperAwesomeDirective"。它将使用以下内容在html中声明。

<my-super-awesome-directive></my-super-awesome-directive>

以下是您的plunker示例的工作版本。

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