带有动态 id 的 slideables queryselector 错误

Question

我正尝试在 github 上使用此 angular 滑动切换指令：https://github.com/EricWVGG/AngularSlideables

它说它支持像 id="foo_{{$index}}" 这样的动态 ID，但它没有提供工作示例。我尝试制作一个，但出现 Uncaught TypeError: Cannot read 属性 'querySelector' of null

我知道 typeError 与 jQuery 在脚本之前加载有关，但由于此 angular 正在处理 jQuery，我不确定如何让此人的代码执行它应该是什么。

<ul>
    <li ng-repeat="row in data">
        <span slide-toggle="#row_{{$index}}" >expand row #{{$index}}.</span>
        <div id="row_{{$index}}" class="slideable">
            <p>How are YOU doing?</p>
        </div>
    </li>
</ul>

我的动态 mod 解决错误：http://jsfiddle.net/3sVz8/486/

如果这可行，我还需要它来使用类似 id="foo_{{item.id}}" 的东西而不是典型的 $index

Answer 1

您收到该错误不是因为您的 ID，而是因为您没有定义 "target" 是什么....

    element.bind('click', function() {
        var content = target.querySelector('.slideable_content');
        if(!attrs.expanded) {
            content.style.border = '1px solid rgba(0,0,0,0)';
            var y = content.clientHeight;
            content.style.border = 0;
            target.style.height = y + 'px';
        } else {
            target.style.height = '0px';
        }
    attrs.expanded = !attrs.expanded;
});

当您设置 var 内容时，没有在任何地方传递或定义目标。您需要事件目标吗？您必须将事件传递给您的回调函数才能访问它。即便如此，为了使用 querySelector，您必须将 target 定义为 document (var target = document)，因为 querySelector 是 document 对象的一种方法。

Read more about querySelector 第一句话说明了一切 "Returns the first element within the document"，这意味着你总是这样使用 querySelector document.querySelector(selectors);

带有动态 id 的 slideables queryselector 错误

slideables queryselector error with dynamic ids

jquery

dynamic

angularjs