如何使用 jquery 获取 DOM 元素中的属性值，在 angularJS 中有一个 ng-repeat答案

【问题标题】：How get attribute values in DOM elements with jquery, having a ng-repeat in angularJS如何使用 jquery 获取 DOM 元素中的属性值，在 angularJS 中有一个 ng-repeat
【发布时间】：2014-03-16 15:28:19
【问题描述】：

我是 angularJS 的新手，我想弄清楚如何执行一个 jquery 函数，该函数允许我在每个图像的 div 容器上绘制一个 SVG，该容器通过 ng-repeat 指令具有“范围”的 ID。

partial.html

<div class="cover-cont" ng-repeat="project in projects" dv-list-projects>
            <a href="#/project/{{project.slug}}">
                <div class="cover" id="{{project.slug}}">

                   <img ng-src="{{project.custom_fields.projectCover}}">
                </div>
            </a>
</div>

我的 jquery 函数：

            $('.cover').each(function(i, e){

            var id = $(this).attr('id');
            var img = $(this).find('img').attr('src');

            var iw = $(this).find('img').width();
            var ih = $(this).find('img').height();

            var draw = SVG(id).size(iw , ih);
            var svgImg = draw.image(img).size(iw,ih);

            svgImg.filter(function(add) {
                console.log('filter');
                add.colorMatrix('saturate', 0.5);
            });

            var polygon = draw.polygon('0,0 '+ iw +',0 0,'+ih);
            svgImg.clipWith(polygon);
            });

所以，我需要获取 src，.cover div 的 Id，但我仍然有 {{project.slug}} 之类的字符串，而不是 .cover id 的此范围的值。

希望你能给出一些关于这个论点的最佳方法。

谢谢。

【问题讨论】：

标签： javascript jquery html angularjs svg

【解决方案1】：

执行此操作的角度方法是使用指令，而不是直接在控制器中使用 jquery 来引用元素，指令为您提供元素。

module.directive("myCover", function() {
    return {
        restrict: "A",
        replace: true,
        scope: {
            project: "=myCover"
        },
        template: "<div class='cover'><img ng-src='{{project.custom_fields.projectCover}}' /></div>",
        link: function(scope, element, attr) {
            // Find the image, you could also modify this slightly so
            // that the directive goes on the image
            var img = element.find("img");

            // Handle when the image is changed
            img.on("load" draw);

            // Apply your manipulations
            function draw() {
                var iw = img.width();
                // logic
            }
        }
    }
});

然后你会在你的 html 中使用它

<div my-cover="project" />

您可以在 http://docs.angularjs.org/guide/directive 找到更多关于指令及其作用的信息：http://docs.angularjs.org/guide/directive

（对不起，没有测试或放小提琴，快速回复：>）

【讨论】：

我已将范围参数修改为 '=myCover' 并在 ng-src 中添加了一个花括号，但现在无法获取元素的宽度，它返回 0。尽管我可以看到它进入控制台检测。
嗨，抱歉，有几个错误已经更新，忘记考虑正在加载的 ng-src，在我四处走动之前是一个飞行回复。为您创建了一个示例：jsfiddle.net/gjQ3A/2
感谢您的更正。我不知道它是否正确，但我已将scope.$watch 添加到链接功能中。
观察更改的值也很好，但它可能会触发得太快，因为您需要先加载图像才能获得其尺寸。您可以在手表scope.$watch("project.importantProperty", fn); 中使用img.one("load", fn); 设置处理程序。如果需要，这将允许您观察其他更改以重绘。

【解决方案2】：

在 Angular 中

您的控制器可能是$scope.projects = data ; // response from service

所以你可以使用this.project.slug

将 jquery 与 angular js 混合并不是一个好的编码习惯

【讨论】：