我试图在angular.js项目中集成jQuery MixItUp。为此,我使用以下自定义指令。
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中使用如下。
<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数据,将medias
集合填充到控制器中,以将角度应用程序连接到Laravel 5.1应用程序。成功回调调用以下函数。在指令中记录集合时,它看起来不错。
$scope.addMedias = function addMedias(data) {
for (var i=0; i<data.length; i++) {
$scope.medias.push(data[i]);
}
$scope.loading = false;
};
内容正常加载,但MixItUp-Tiles会隐藏display: none
。向视图添加过滤器时,过滤时会显示切片,但启动时则不会显示
我还尝试从CSS中删除Twitter Bootstrap 3中的浮点数,因为MixItUp正在使用display: inline-block
。
#mixitup-container .mix {
display: none;
float: none;
}
此外,MixItUp调试脚本不会显示任何错误。但#mixitup-container
附加了fail
个等级。
答案 0 :(得分:0)
我设法将jQuery MixItUp集成到我的AngularJs应用程序中 自定义指令现在看起来像这样:
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。这是通过触发以下内容来完成的:
// init
$rootScope.$broadcast('init-mixitup');
// sort
$rootScope.$broadcast('resort-mixitup', 'myorder:desc');
视图HTML如下所示:
<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>
我还包括了我最喜欢的css规则:
#mixitup-container {
.mix {
display: none;
}
}
仍然存在一个小问题。当我第一次使用MixItUp访问页面时,一切正常,但第二次,过滤器和排序不再起作用。我正在使用角度$routeProvider
来管理路由。此处还有另一个与此问题相关的问题:How to initiate MixItUp with AngularJS NgRoute