Question

我希望在http://jeff-collins.github.io/ment.io/#/examples.i的项目中使用ment-io实现了大约100％。但这不适用于此。如何动态地在mentio textarea div中添加id

我的代码：

<div contenteditable mentio
                        mentio-typed-term="typedTerm"
                        mentio-macros="macros"
                        mentio-require-leading-space="true"
                        class="editor form-control"
                        id="htmlContent{{index}}"
                        ng-model="htmlContent">
                    </div>
                    <mentio-menu
                            mentio-for="'htmlContent'"
                            mentio-trigger-char="'@'"
                            mentio-items="people"
                            mentio-search="searchPeople(term)"
                            mentio-select="getPeopleText(item)"
                            ></mentio-menu>

Answer 1

问题在于，当使用其中包含表达式的id时，在menito-menu指令尝试定位元素时，它将无法解析。解决此问题的一种方法是在ng-if上使用等待表达式解析的mentio-menu。

http://plnkr.co/edit/BUjixoaGZ8f54ZTv84bh?p=preview

<body ng-app="app" ng-controller="testCtrl">
    <div contenteditable 
        mentio
        mentio-typed-term="typedTerm"
        mentio-require-leading-space="true"
        class="editor form-control"
        id="{{'htmlContent' + index}}"
        ng-model="htmlContent">
    </div>
    <mentio-menu ng-if="index"
        mentio-for="'htmlContent' + index"
        mentio-trigger-char="'@'"
        mentio-items="people"
        mentio-search="searchPeople(term)"
        mentio-select="getPeopleText(item)">
    </mentio-menu>
</body>

或者，如果您想在ng-repeat中执行此操作，则可以执行以下操作：

http://plnkr.co/edit/JslXZ4ETZa3qFZyPMbAK?p=preview

<div ng-repeat="item in items">
  <div contenteditable 
        mentio
        mentio-typed-term="typedTerm"
        mentio-require-leading-space="true"
        class="editor form-control"
        id="{{'htmlContent' + $index}}"
        ng-model="htmlContent">
    </div>
    <mentio-menu ng-if="item"
        mentio-for="'htmlContent' + $index"
        mentio-trigger-char="'@'"
        mentio-items="people"
        mentio-search="searchPeople(term)"
        mentio-select="getPeopleText(item)"
    ></mentio-menu>
</div>

Answer 2

元素的ID是在外部指定时将mentio指令连接到其菜单的方法。如果你只有一个触发器char，你可以解决这个问题的一种方法就是将mentio-items，mentio-search和mentio-select移动到div。如果您有多个触发器字符，则需要单独的规范。

Answer 3

仅供参考 - 发布了新版本的ment-io：0.9.12，允许您使用mentio-id字段指定mentio的ID。此属性可以包含{{'htmlContent'+ index}}，并且将在不需要ng-if的情况下进行适当评估。有关文档中的详细信息，请参阅ment.io项目。

http://jeff-collins.github.io/ment.io/#/documentation

Answer 4

您可以通过指令直接编辑元素的ID，您只需将“elem”上的id添加为参数（链接阶段）。确保mentio-menu在指令编译后触发其init（指令优先级：...）。

如何动态地在mentio textarea div中添加id

4 个答案: