ng-repeat conflics with jQuery function call

问题

I combined AngularJS and MaterializeCSS and use ng-repeat to render images. MaterializeCSS includes the jQuery-based materiabox function to execute an animation to open a modal for each element with the materialbox class.

The modal can't be opened by clicking. If I display a single image without ng-repeat it works fine.

Here is my code:

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();
});

回答1:

Hi i had the same problem , the solution is put the jquery code into a angularjs directive , some like:

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();
    }
   };
 });

and for the html code ,put the name of the directive like a attr of the tag:

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>

this works for me, greetings reference : https://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

来源：https://stackoverflow.com/questions/29062122/ng-repeat-conflics-with-jquery-function-call