如何在脚本标签内使用 angular.js 变量？

Question

我正在使用 angular.js 在视图上显示一些元素，并尝试使用 jquery 连接来连接这些 dom 元素。这些元素正在正确显示，但我无法在 sscript 标签中使用它们。

<div ng-repeat = "impact in activity.text" style=" margin-right: auto;background: rgb(255, 255, 255);
                                      background: rgba(255, 255, 255, 0.7);
                                      min-width: 4em;
                                      min-height: 3em;
                                      max-width: 29ex;
                                      margin: 1.2em;
                                      padding: 0.6em;

                                      word-wrap: break-word;
                                    border: 1px solid rgb(200, 200, 200);
                                    border: 1px solid rgba(0, 0, 0, 0.2);
                                    border-radius: 16px;
box-shadow: 2px 5px 5px rgba(0,0,0,0.2);"  class="impact\{{$index}}" id="">

    \{{impact}}</div>


<script>
    $(document).ready(function() {


        $('div.impact\{{$index}}').connections({ from: 'div.actors' }).length;
        var connections = $('connection, inner');
        setInterval(function() { connections.connections('update') }, 10);
    });

</script>


</div>

在这里，我为每个元素生成唯一的类名。 但是当我在脚本标记中使用相同的值时，我在控制台中收到错误消息。

Uncaught Error: Syntax error, unrecognized expression: div.impact{{$index}}

Answer 1

您的逻辑中存在错误， $index 表示当前 ng-repeat 的迭代索引，出于显而易见的原因，该索引不存在于循环本身之外。

你想为每个生成的 DIV 运行这个 JS 代码吗？ 您可以在循环内移动脚本标签，但 Angular 不会解析脚本标签，如 charlietfl 所述。

您可以编写一个指令并将其作为属性附加到 ng-repeat DIV：

angular.module('myApp').directive('updateConnections', function($interval) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.connections({ from: 'div.actors' }).length;
            var connections = angular.element('connection, inner');
            $interval(function() { connections.connections('update') }, 10);
        }
    };
});

要使用该指令：

<div update-connections ng-repeat="impact in activity.text">...</div>