AngularJS如何使用 angular.js 变量在脚本标记内的?

发布时间: 2017/4/16 11:17:21
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我表现一些元素视图使用 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}}

enter image description here

解决方法 1:

你的逻辑有错误,$index 表示当前吴重复迭代索引,不存在外循环本身,原因很明显。

你想要为每个生成的 DIV 运行此 JS 代码吗? 您可以移动脚本标记在循环中,但角不解析脚本标记中,如 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>
官方微信
官方QQ群
31647020