Question

我正在尝试创建一个与Solr一起使用的faceting小部件。如何向每个新添加的构面项添加ng-click事件。因此，当用户单击列表中的项目时，我可以重新查询solr。

HTML用法：

<facet field="query.response.facets.facet_fields.location" name="location" />

指令：

var commonComponentsApp = commonComponentsApp || angular.module('cpUtils', []);
commonComponentsApp.directive("facet", function($compile) {
'use strict';
return {
    restrict: "E",
    scope: {
        field: "=",
        name: "@"
    },
    link: function (scope, element) {
        var list = new Array(), i, facet_item;
        scope.$watch('field', function (data) {
            if (data === undefined || data === null) {
                return;
            }
            for (i = 0; i <= data.length - 1 ; i += 2) {
                facet_item = '<li class="unstyled" ng-click=applyFilter('+ scope.name + "," + data[i] + ')>' + data[i] + " (" + data[i + 1] + ")</li>";
                var e = angular.element(facet_item);
                $compile(e.contents())(scope);
                list.push(e);
            }
            element.html(list);
        });

        scope.applyFilter = function (facet, value) {
            console.log("called");
            console.log(facet + ' ' + value);
        }
    }
};
});

由于

Answer 1

我在这里可以看到一些问题。首先，您正在编译li项目的内容，而不是元素本身......

$compile(e.contents())(scope);

ng-click指令位于实际的li元素上，因此您需要编译整个事物，而不仅仅是其子元素。将该行更改为...

e = $compile(e)(scope);

接下来，你正在观察scope.field的值，它看起来是一个数组，基于你的for循环。因此，您应该使用$ watchCollection而不是$ watch。

scope.$watchCollection('field', ...

接下来，您无法将原生javascript数组添加到DOM ...

    ...
    list.push(e);
}
element.html(list);

不是将每个编译的元素添加到数组中，而是立即将每个元素追加到DOM中。所以将上面的内容改为......

    ...
    element.append(e);
}

它会很快发生，它们会同时被添加到DOM中。

最后，假设您传递给ng-click函数的参数是字符串，您需要将它们放在引号中。将行改为这样的......

facet_item = '<li class="unstyled" ng-click=applyFilter("'+ scope.name + '","' + data[i] + '")>' + data[i] + ' (' + data[i + 1] + ')</li>';

Angular $在ng-click中评估参数，这意味着它基本上将它们视为javascript代码，它允许您传递变量。如果你没有引号，它认为它们是变量（未定义），在你的情况下它们实际上只是原语（我假设的字符串）

在指令中创建一个新的HTML元素并添加click事件

1 个答案: