ng-repeat conflics与jQuery函数调用 [英] ng-repeat conflics with jQuery function call

问题描述

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

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.

无法通过单击打开模态.如果我只显示一张没有ng-repeat的图像，那就可以正常工作.

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

这是我的代码:

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

推荐答案

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

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

JavaScript

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代码，将指令的名称输入为标签的attr，例如:

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>

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

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

这篇关于ng-repeat conflics与jQuery函数调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！