JQuery通过AngularJS混合元素无效

过去两天我一直在做这件事，不知道我犯了什么错误

尝试从json源中重复元素，并成功地重复内容。 但在那之后需要应用Mixitup插件

以下是角度代码：

---

这是我的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>

全部显示
网站
手机
品牌和标识
电子商务
打印和图形
营销


递减
递增
默认值

不确定这是否是您的问题，但是如果您希望在请求完成后激活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);
    }); 

});

---

这里有两个潜在的问题

第一个是

$http

是异步的，因此您可能需要在$http（）.success回调中运行任何类型的初始化

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

第二个需要更多的解释：

在angular上下文之外修改DOM通常不是您想要做的事情（因为angular运行时是如何工作的）

将数组分配给$scope变量并不意味着已经创建了DOM节点（通过ng repeat等）。通常，您必须强制angular“刷新自身”，并运行由某些方法触发的摘要循环。典型的是$scope。$apply，您可以在此处找到有关这类内容的信息：

$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

时间移到1ms左右。

谢谢大家

当我将mixitup置于success状态时，它甚至没有从那里调用它，而是当我将它放在呈现ng repeat的实际html中时，它的调用会给我以下调试消息

• 找到[MixItUp][portfolioList][[u bindHandlers]3个排序按钮
• 找到[MixItUp][portfolioList][[u bindHandlers]7个筛选按钮
• [MixItUp][portfolioList][[u init]MixItUp已在ID为“portfolioList”的容器上实例化
• [MixItUp][portfolioList][[u init]文档中当前有1个MixItUp实例
• [MixItUp][portfolioList][[u刷新]MixItUp已刷新。共找到0个目标 找到并索引。找不到与VM1214:8混合就绪匹配的元素
• VM1214:5[MixItUp][portfolioList][\u cleanUp]加载动画已成功完成

---

这里没有足够的信息来帮助您。请指出控制台中的任何错误，包括相关的视图/模板，并确保在angular之前包含了jquery。请在上面的“混乱”中标记answer pleaseSorry，

$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);