Question

我在我的应用程序中使用AngularJS来请求一些数据：

$http.get(cmsUrl + "/city_guides/index.json").success(function(data, status) {
    $scope.city_guides = data;
});

现在，使用我的city_guides变量，使用数据填充我的视图。

div#MixItUpContainer1(mix-it-up)
            .mix.category-nature(ng-repeat="cityguide in city_guides")
                span.arrow
                img(src="http://lorempixel.com/800/400/sports/", alt="")
                div.details
                    p.
                        Lorem ipsum dolor sit amet

现在，我将初始化mixitup jquery插件。

superLegalApp.directive('mixItUp', ['$compile', '$timeout', function($compile, $timeout) {

return {
   restrict: 'AE',
   replace: false,
   link: function($scope, elem, attrs) {

       $timeout(function() {
          $(elem).mixItUp();
       });
   }
 }
    }]);

如您所见，我使用angular指令执行此操作。

但是Mixitup增加了一个＆＃34;失败＆＃34;类到我的对象。

我该如何解决这个问题？非常感谢

Answer 1

我在AngularJS中遇到了与jQuery MixItUp类似的问题。

我设法使用AngularJS函数$rootScope.$broadcast集成了插件。

加载$http的所有数据后，我通过调用：

触发MixItUp

$rootScope.$broadcast('init-mixitup');

这是我的指示，我在这里听这个事件：

myApp
.directive('mixitup', function($compile) {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            scope.$on('init-mixitup', function(event) {
                console.log('init');
                angular.element(element).mixItUp({
                    animation: {
                        duration: 200
                    },
                    load: {
                        sort: 'myorder:desc'
                    }
                });
            });
        }
    };
});

您可以在此处查看完整问题：Integrating jQuery MixItUp in an angular.js project

使用jQuery插件的AngularJS $ http（Mixitup）

1 个答案: