angularjs - 在 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)}}" />'

问题是两行都显示“无数据”。我想在值为 4 的单元格上显示“真实数据”，在值为 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