Is it possible to use multiple isotope containers on the same page?

[snez]

If not, any suggestions on how to achieve this?

[mankindsoftware]

I haven't really tested multiple isotope containers, although I did design and code the ability for it. The main issue would be the event names. There are default option and method event names that are used in the following way:

-- $scope.$emit('iso-option', {options}; -- $scope.$emit('iso-method', {name:methodName, params:optionalParameters};

The early Angular-Isotope versions made you specify explicitly the event names. Now the default names above are used and tested. The earlier code remains under limited warranty.

Default event names can be over-ridden on a per-container basis on the isotopeContainer directive with "isoOptionsSubscribe" and "isoMethodSubscribe" attributes.

So... -- <div isotopeContainer isoOptionsSubscribe='myOptions'.... Lets you... -- $scope.$emit('myOptions', {...

This was the working intent early on, but frankly I haven't tested the Subscribe attribute for a few releases now. It should work though.

Thanks! Mark

[toadkicker]

+1 you can use them as Mark described. I am using them in combo with bootstrap tabs based on this answer.

[Brightergy-PetroLysenko]

Hello, how are you?

I have one question by guest. Is it possible to use such way ? isoMethodSubscribe='myMethod' -- $scope.$emit('myMethod', {....

I was used it to refresh for multiple isotopeContainer , but did not work. Help me please. Thanks. Petro

[Brightergy-PetroLysenko]

I solved it myself. Thanks. Petro

[torasko]

http://plnkr.co/edit/RlARPYVf8ksLj6hYazrm?p=preview

Could anyone help me initialise both isotopes containers? I've tried to add 'iso-options-subscribe' or 'iso-method-subscribe' attributes, but no luck

[aceangel3k]

Hi, I've tried adding an additional container but the first isotope container stops working.

[jybleau]

Hi, It looks like it's not possible to have more than one isotope container under the same $scope or controller...

[paratoner]

Can you send an example. I spent a lot of hour to achieve this but I could not. :(

[toadkicker]

You dont have to put everything under scope, and this is a case where using some namespacing would be idea.

[paratoner]

I really dont understand you :( can you send an example for me. Thanks.

[paratoner]

after eight hour i solved the problem without "angular-isotope". I used this directive

var myModule= angular.module('MyApp', []).directive('ngRepeatEndWatch', function () {
    return {
        restrict: 'A',
        scope: {},
        link: function (scope, element, attrs) {
            if (attrs.ngRepeat) {
                if (scope.$parent.$last) {
                    if (attrs.ngRepeatEndWatch !== '') {
                        if (typeof scope.$parent.$parent[attrs.ngRepeatEndWatch] === 'function') {
                            // Executes defined function
                            scope.$parent.$parent[attrs.ngRepeatEndWatch]();
                        } else {
                            // For watcher, if you prefer
                            scope.$parent.$parent[attrs.ngRepeatEndWatch] = true;
                        }
                    } else {
                        // If no value was provided than we will provide one on you controller scope, that you can watch
                        // WARNING: Multiple instances of this directive could yeild unwanted results.
                        scope.$parent.$parent.ngRepeatEnd = true;
                    }
                }
            } else {
                throw 'ngRepeatEndWatch: ngRepeat Directive required to use this Directive';
            }
        }
    };
});

and then in my html

   <ul class="items col-4" id="isotopecontainer">
<li class="item thumb {{item.id}}" ng-cloak ng-repeat="item in someModel.SomeArray" ng-repeat-end-watch="ModelRendered">
 </ul>

$scope.ModelRendered= function () {
        setTimeout(function () {
            $isotopecontainer.isotope("reloadItems");
            $isotopecontainer.isotope({
                filter: "*"
            });
        }, 100);
    };

[jybleau]

@paratoner Can you reformat your code... :)

[SempaChoo]

@Brightergy-PetroLysenko how did you solve this problem ? I still can't figure it out.. I have two containers where i need to init isotope but first one stops working for some reason... I tried with iso-options-subscribe and iso-method-subscribe but no luck.