在angular.js项目集成的jQuery MixItUp [英] Integrating jQuery MixItUp in an angular.js project
问题描述
我试图jQuery的MixItUp在angular.js项目集成。为此,我使用下面的自定义指令。
I'm trying to integrate jQuery MixItUp in an angular.js project. For this purpose i'm using the following custom directive.
app.directive('mixitup', function($compile) {
return {
restrict: 'A',
scope: {
entities: '='
},
link: function(scope, element, attrs) {
scope.$watchCollection('entities', function() {
angular.element(element).mixItUp({
animation: {
duration: 200
},
load: {
sort: 'date:desc'
},
debug: {
enable: true,
mode: 'verbose'
}
});
}, true);
}
};
});
该指令在HTML中使用如下。
The directive is used in HTML as following.
<div mixitup="mixitup" id="mixitup-container" entities="medias">
<div ng-repeat="media in medias"
data-date="{{ media.date }}"
class="{{ itemClass }} {{ media.category }}">
<div class="image">
<img ng-src="{{ media.cover_image }}" class="img-responsive"></div>
</div>
</div>
的媒体
收集被取出由定制服务JSON数据的角度应用连接到Laravel 5.1应用填补了一个控制器。成功回调调用下面的函数。当指令记录的集合,它看起来不错。
The medias
collection is filled in a controller by fetching JSON data from custom services to connect the angular app to a Laravel 5.1 app. The success callback calls the following function. When logging the collection in the directive, it looks good.
$scope.addMedias = function addMedias(data) {
for (var i=0; i<data.length; i++) {
$scope.medias.push(data[i]);
}
$scope.loading = false;
};
内容加载为正常,但MixItUp,瓷砖留隐患与显示:无
。当添加过滤器视图,瓷砖显示过滤时,而不是在启动时。结果
我也尝试从Twitter在CSS删除彩车引导3,因为MixItUp使用显示:inline-block的
The content is loaded as normal, but the MixItUp-Tiles stay hidden with display: none
. When adding filters to the view, the tiles show up when filtering, but not at startup.
I also tried removing floats from Twitter Bootstrap 3 in CSS, because MixItUp is using display: inline-block
.
#mixitup-container .mix {
display: none;
float: none;
}
另外,MixItUp调试脚本不显示任何错误。但#mixitup容器
获取类失败
连接。
推荐答案
我设法jQuery的MixItUp融入我AngularJs应用程序。结果
自定义指令现在看起来是这样的:
I managed to integrate jQuery MixItUp into my AngularJs app.
The custom directive now looks like this:
myApp
.directive('mixitup', function($compile) {
return {
restrict: 'A',
scope: {
datasource: '=',
add: '&',
},
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'
}
});
});
scope.$on('resort-mixitup', function(event, sortCommand) {
angular.element(element).mixItUp('sort', sortCommand);
});
}
};
});
我用角广播功能初始化MixItUp一旦所有数据被加载。这是由触发以下完成:
I used angular broadcast functionality to init MixItUp once all data is loaded. This is done by triggering the following:
// init
$rootScope.$broadcast('init-mixitup');
// sort
$rootScope.$broadcast('resort-mixitup', 'myorder:desc');
该视图的HTML如下:
The view HTML looks like this:
<div class="btn-group controls">
<button class="btn btn-lg filter"
data-filter="all">All</button>
<button class="btn btn-lg filter"
data-filter=".photo">Photo</button>
<button class="btn btn-lg filter"
data-filter=".audio">Audio</button>
<button class="btn btn-lg filter"
data-filter=".video">Video</button>
</div>
<div mixItUp="mixItUp" id="mixitup-container">
<div ng-repeat="item in items"
id="{{ item.id }}"
style="display: inline-block;"
data-myorder="{{ item.date }}"
class="mix col-xs-6 col-sm-4 {{ item.category }}">
<img ng-src="{{ item.image }}" class="img-responsive img-circle">
</div>
</div>
我也包含在prefered CSS规则我少:
I also included the prefered css rule in my less:
#mixitup-container {
.mix {
display: none;
}
}
一个小问题仍然存在。当我访问与MixItUp页面的第一次,一切正常,但第二次,过滤和排序不工作了。我使用的角度 $ routeProvider
来管理路由。这里有关于这个问题的另外一个问题:<一href=\"http://stackoverflow.com/questions/26218154/how-to-initiate-mixitup-with-angularjs-ngroute\">How启动MixItUp与AngularJS NgRoute
One small problem remains. When i visit the page with MixItUp the first time, everything is okay, but the second time, the filters and sorting aren't working anymore. I'm using the angular $routeProvider
to manage routing. There is another question relating this issue here: How to initiate MixItUp with AngularJS NgRoute
这篇关于在angular.js项目集成的jQuery MixItUp的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!