JQuery Mixitup Elements通过AngularJS ngrepeating无法正常工作

时间:2014-04-03 00:04:42

标签: jquery angularjs

我过去两天一直在努力,并没有弄清楚我做错了哪里。

尝试通过Angular从json源重复元素并成功重复内容。 但之后需要应用Mixitup插件。

这是Angular代码:

$scope.url = 'views/portfolio-all.php';
    $http.post($scope.url).
    success(function(data, status) {
    if ( angular.isArray(data) ) {
        $scope.reports = data;
    }
    else {
        $scope.reports = [data];
    }           
    })
    .
    error(function(data, status) {
        $scope.data = data || "Request failed";
        $scope.status = status;
        console.log(status);
    }); 
    $('#portfolioList').mixItUp({
    callbacks: {
        onMixLoad: function(){
            console.log('MixItUp ready!');
        },
        onMixFail: function(){
            console.log("No elements found matching");
        }
    },
    load: {
        filter: '.website'
    },
    debug: {
        enable: true,
        mode: 'verbose'
    }
});

这是我的HTML,你看错了吗?

<div id="portfolio-thumbs">
  <div class="container">
    <div class="menubar controls">
        <ul>
            <li class="filter hide" data-filter="all">Show All</li>
            <li class="filter active" data-filter=".website">Websites</li>
            <li class="filter" data-filter=".mobile">Mobiles</li>
            <li class="filter" data-filter=".brand">Brand & Identity</li>
            <li class="filter" data-filter=".ecommerce">E-Commerce</li>
            <li class="filter" data-filter=".print">Print & Graphics</li>
            <li class="filter" data-filter=".marketing">Marketing</li>
        </ul>
        <div class="clearfix"></div>
    </div>
  </div>

    <div class="controls hide">
        <ul>
            <li class="sort" data-sort="data-cat" data-order="desc">Descending</li>
            <li class="sort" data-sort="data-cat" data-order="asc">Ascending</li>
            <li class="sort active" data-sort="default" data-order="desc">Default</li>
        </ul>
    </div>
  <div class="clearfix"></div>
  <div class="container">
    <div class="row" id="portfolioList" ng:repeat="report in reports">

          <div class="mix {{reportItem.categories}}"  ng:repeat="reportItem in report">
            <a ng-href="#portfolio/{{reportItem.title_alias}}">
                <img ng-src="{{reportItem.img}}"/>
                <div><span>{{reportItem.title}}</span></div>
            </a>
           </div>

        <div class="gap"></div>
        <div class="gap"></div>
    </div>
  </div>
</div>

3 个答案:

答案 0 :(得分:1)

不确定这是否是你的问题,但是你想在请求完成后激活mixItUp,你需要从成功回调中调用它,因为调用是异步的。

$scope.url = 'views/portfolio-all.php';
    $http.post($scope.url).
    success(function(data, status) {
    if ( angular.isArray(data) ) {
        $scope.reports = data;
    }
    else {
        $scope.reports = [data];
    }

    //call mixItUpHere:
    $('#portfolioList').mixItUp({
    callbacks: {
        onMixLoad: function(){
            console.log('MixItUp ready!');
        },
        onMixFail: function(){
            console.log("No elements found matching");
        }
    },
    load: {
        filter: '.website'
    },
    debug: {
        enable: true,
        mode: 'verbose'
    }           
    })
    error(function(data, status) {
        $scope.data = data || "Request failed";
        $scope.status = status;
        console.log(status);
    }); 

});

答案 1 :(得分:1)

这里有两个潜在的问题。

第一个是$http是异步的,因此您可能需要在$ http()。success callback中运行任何类型的初始化。

$http.get('myurl.php').success(function(data){
   //do stuff here that deals with your returned data
});

第二个需要更多解释:

在角度上下文之外修改DOM通常不是您想要做的事情(因为角度运行时的工作方式)。

仅仅因为你为$ scope变量分配一个数组并不意味着已经创建了DOM节点(通过ng-repeat等)。通常情况下,你必须强迫角度来刷新自己&#34;并运行由某些方法触发的摘要循环。典型的是$ scope。$ apply,你可以在这里找到关于这类事情的信息:

http://docs.angularjs.org/api/ng/type/ $ rootScope.Scope

我自己通常使用$ timeout服务,它也在内部处理这个问题。所以我只想用你的jQuery插件代码包装:

$timeout(function() {
    // load jquery plugin here
    // at 500ms so you can tell for sure if this is the problem or not
    // normally you wouldn't want to wait a half second to load something
}, 500);

声明: 使用timeout()或sleep()机制修复非确定性代码在大多数情况下是一个非常糟糕的主意,除非你真的需要一起破解。

我也会尝试$scope.$apply()或将$timeout时间移动到1毫秒等。

答案 2 :(得分:0)

谢谢你们,

当我把mixitup置于成功状态时,它甚至没有从那里调用它,但当我把它放在渲染ng-repeat的实际html中时,它的调用它给了我以下调试消息。

  • [MixItUp] [portfolioList] [_ bindHandlers]找到3个排序按钮。
  • [MixItUp] [portfolioList] [_ bindHandlers]找到7个过滤按钮。
  • [MixItUp] [portfolioList] [_ init]在ID为“portfolioList”的容器上实例化MixItUp。
  • [MixItUp] [portfolioList] [_ init]文档中目前有1个MixItUp实例。
  • [MixItUp] [portfolioList] [_ refresh] MixItUp刷新。有0个目标 找到并编入索引。找不到与VM1214匹配的元素:8 MixItUp ready!
  • VM1214:5 [MixItUp] [portfolioList] [_ cleanUp]加载动画已成功完成。