Question

我想＆＃34; directivize＆＃34;搜索结果。每个结果都将在li HTML标记内呈现为ul。

这意味着我想避免将包含指令元素的DOM呈现给DOM的默认AngularJS行为。

<ul>
  <my-result>
    <li></li>
  </my-result>
  <my-result>
    <li></li>
  </my-result>
</ul>

我已尝试使用replace: true，但这会产生TypeError：

definition.match不是函数

有人能指出我在正确的方向吗？也许我应该使用属性指令，但是我不确定如何绑定隔离范围项？

我的指示如下：

var template = require('text!./template.html');

return function() {
    return {
        restrict: 'E',
        scope: {
            select: '&',
            result: '=',
        },
        template: template,
    };
};

我使用ng-repeat来渲染结果：

<ul>
  <my-result
    ng-repeat="result in results"
    result="result"
    select="select({result:result})"
  >
  </my-result>
</ul>

我正在使用Angular 1.4。

Answer 1

不推荐使用replace选项。（从1.3开始我认为？）

如果您的指令模板包含<ul>元素，那会更好看。在这种情况下，您不会遇到在<ul>和<li>之间设置指令元素的问题。

如果您没有其他选项，正如您所说，您仍然可以将该指令用作<li>的属性，如下所示：

<ul>
  <li my-result
    ng-repeat="result in results"
    result="result"
    select="select({result:result})"
  >
  </li>
</ul>

结果和选择仍应可用于指令的范围。

AngularJS控制指令呈现的精确DOM

1 个答案: