ng-repeat 与 jQuery 函数调用冲突答案

【问题标题】：ng-repeat conflics with jQuery function callng-repeat 与 jQuery 函数调用冲突
【发布时间】：2015-05-17 16:47:10
【问题描述】：

我结合了 AngularJS 和 MaterializeCSS 并使用 ng-repeat 来渲染图像。 MaterializeCSS 包含基于 jQuery 的 materiabox 函数，用于执行动画以为每个具有 materialbox 类的元素打开一个 modal。

点击无法打开模态框。如果我在没有 ng-repeat 的情况下显示单个图像，它可以正常工作。

这是我的代码：

HTML：

<div class="container" ng-controller="MainCtrl">
    <span class="col m6 l4">
        <li ng-repeat="url in imageUrls">
            <img class="materialboxed" ng-src="{{ url }}">
        </li>
    </span>
</div>

Javascript：

var app = angular.module("app", []);

app.controller("MainCtrl", function($scope) {
    $scope.imageUrls = ["https://d13yacurqjgara.cloudfront.net/users/179234/screenshots/1958409/screen_shot_2015-03-04_at_14.58.59.png", "https://d13yacurqjgara.cloudfront.net/users/5276/screenshots/1958408/booze_cruise_icon_kendrickkidd.jpg"];
});


// Code from MaterializeCSS
$(document).ready(function(){
    $('.materialboxed').materialbox();
});

【问题讨论】：

没有人会去看你的演示代码，尤其是。如果它不是一个链接。在此处发布相关代码。
我添加了关于 HTML 和 JS 的代码摘录。
您是否添加了文档页面上列出的用于动态添加图像的初始化代码？
关于 AngularJS 或 MaterializeCSS（用于 jQuery）的文档？
你链接的页面上的初始化代码materializecss.com/media.html

标签： javascript jquery angularjs material-design

【解决方案1】：

您好，我也遇到了同样的问题，解决方案是将 jquery 代码放入 angularjs 指令中，例如：

Javascript

yourApp.directive('theNameOfYourDirective', function() {
return {
    // Restrict it to be an attribute in this case
    restrict: 'A',
    // responsible for registering DOM listeners as well as updating the DOM
    link: function() {
        $('.materialboxed').materialbox();
    }
   };
 });

对于 html 代码，将指令的名称作为标记的属性：

HTML

<div class="container" ng-controller="MainCtrl">
<span class="col m6 l4">
    <li ng-repeat="url in imageUrls" theNameOfYourDirective>
        <img class="materialboxed" ng-src="{{ url }}">
    </li>
</span>

这对我有用，问候参考：https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

【讨论】：