ng-repeat 与 jQuery 函数调用冲突

Question

我将每个元素的 AngularJS 和 MaterializeCSS and use ng-repeat to render images. MaterializeCSS includes the jQuery-based materiabox function to execute an animation to open a modal 与 materialbox class 相结合。

弹窗无法通过点击打开。如果我在没有 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();
});

Answer 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/

ng-repeat 与 jQuery 函数调用冲突

ng-repeat conflics with jQuery function call

javascript

jquery

angularjs

material-design