angularjs - 使用指令使用 angularJS 语法更改 HTML

Question

我正在尝试学习一下AngularJS，我想做以下事情：

创建一个表，该表具有可排序的列并具有描述排序方向的箭头图像。

我试图做的是创建一个名为 sort 的指令，它采用排序列并更改 sortByColumn 变量。这工作正常。唯一的问题是当我尝试更改图像的类别时。

起初我尝试使用模板这样使用：

link: function(scope, element, attrs)
{
    ...
},
template: '<span class="image" ng-class="{is-visible: someVar == attrs.sort}"></span>'

这不起作用，因为未定义 attrs 变量，所以第一个问题是......有没有办法访问模板内的元素属性？

如果没有，我接下来尝试做的是在链接中手动设置 html：

link: function(scope, element, attrs)
{
    element.html('<a href="#" onclick="return false;">' + element.html() + '<span class="sort-image" ng-class="{visible: true}"></span></a>');
}

这不起作用，因为它不评估 ng-class。

我怎样才能做到这一点？

Answer 1

myApp.directive('sort', function () {
        return {
            scope: {
                sort: "@"
            },
            link: function (scope, element, attrs) {
                ...
            },
            template: '<a href="#" onclick="return false;"><span style="display:inline-block;" ng-transclude></span><span class="sort-image" ng-class="{visible: sort == (sortByColumn)}"></span></a>',
            transclude: true
        };
    });

我想出了答案。我可以只使用隔离范围“@”来传递属性值。