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>

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

1 个答案: