Question

我结合了AngularJS和MaterializeCSS并使用ng-repeat来渲染图像。 MaterialiseCSS包含基于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();
});

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代码，将指令的名称设置为标记的attr：

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函数调用冲突

1 个答案: