Question

我经常搜索并尝试不同的东西。但到目前为止没有任何效果。

我的任务是，通过angular中的指令在ng-class属性中添加一个函数。

我有以下标记：

 <table class="table">
    <tr>
       <td>Content 1</td>
       <td>Content 2</td>
    </tr>
 </table>

使用要追加结果的属性：

 <table class="table" data-ng-class="getTableClass()">
    <tr>
       <td>Content 1</td>
       <td>Content 2</td>
    </tr>
 </table>

我的指示：

angular.module('app', []).directive('table', [ function () {
    return {
        restrict: 'C',
        replace: false,
        controller: function($scope){
            $scope.getTableClass = function(){
                console.log("inner controller");
                return "green";
            };
        },
        compile: function (elem, attr) {
            return {
                pre: function preLink(scope, elem, attrs, controller) {
                    elem.attr("data-ng-class", "getTableClass()");
                },
                post: function postLink(scope, elem, attrs, controller) {}
            }
        }
    };
}])

到目前为止一切正常。如果我在没有指令的情况下对此进行编程，则会追加附加类。但是，如果我使用指令执行此操作，则不会对该属性进行评估。

请参阅我的 example 。有两张桌子。第一个是指令，第二个是硬编码属性。

正如您所看到的，第二个将颜色更改为绿色，这是在指令的控制器中定义的，第一个不执行任何操作。

我不确定，如果我是以正确的方式做到这一点。

编辑：我发现了一些可能的 solution

在我对代码进行了一些更改之后，它在 jsfiddle ~~中工作，但在我的realworld应用程序中，它实际上很慢......~~

编辑:(它在我的realworld应用程序中不起作用（ng-repeat内的指令））

没有ng-repeat ..

我将第三个案例添加到jsfiddle。

第一种情况是硬编码的 - ＆gt;工作（从设计控制器变为绿色）
第二个是指令 - ＆gt;工作（从数据控制器变成蓝色）
最后一个是在ng-repeat中使用相同的指令。 - ＆GT;这个不起作用。

追加属性并将其绑定在AngularJS指令中

0 个答案: