ng-source и materializecss materialbox не работают

У меня есть приложение flask, и я использую angularjs вместе с materializecss во внешнем интерфейсе. В этом приложении есть галерея, в которой я хотел бы использовать с ней materialbox. Если изображения загружаются динамически, materialbox не сработает должным образом.

Я нашел возможный дубликат этого вопроса здесь, но, к сожалению, это не сработало.

app.js

app.config(function($interpolateProvider, $routeProvider) {
        $interpolateProvider.startSymbol('{${');
        $interpolateProvider.endSymbol('}$}');

        $routeProvider

            // route for the home page
            .when('/', {
                templateUrl : 'pages/main_page.html',
                controller  : 'ListUrlController'
            })

            // route for the gallery page
            .when('/download/:threadUrl?', {
                templateUrl : 'pages/gallery_show.html',
                controller  : 'FormController'
            });

    });

showgallery.html не работает

<div class="row" ng-repeat="image_list in images" ng-show="ImageExists">
    <div class="col s12 m6 l3" ng-repeat="image in image_list">
        <img ng-src="{${ image.t_image }$}" class="responsive-img materialboxed" width="250">
    </div>
</div>
<script type="text/javascript">
    this.$('.materialboxed').materialbox();
</script>

но это работает (жестко кодирует URL-адреса изображений)

<div class="row">
    <div class="col s12 m6 l3">
        <img src="http://img00.deviantart.net/ac7a/i/2014/279/d/f/lionel_messi_by_anaaospedacos-d800pg8.png" class="responsive-img materialboxed" width="250">
    </div>
    <div class="col s12 m6 l3">
        <img src="http://img00.deviantart.net/ac7a/i/2014/279/d/f/lionel_messi_by_anaaospedacos-d800pg8.png" class="responsive-img materialboxed" width="250">
    </div>
    <div class="col s12 m6 l3">
        <img src="http://img00.deviantart.net/ac7a/i/2014/279/d/f/lionel_messi_by_anaaospedacos-d800pg8.png" class="responsive-img materialboxed" width="250">
    </div>
    <div class="col s12 m6 l3">
        <img src="http://img00.deviantart.net/ac7a/i/2014/279/d/f/lionel_messi_by_anaaospedacos-d800pg8.png" class="responsive-img materialboxed" width="250">
    </div>
</div>
<script type="text/javascript">
    this.$('.materialboxed').materialbox();
</script>

но это также вызывает некоторое исключение в консоли Uncaught TypeError: Cannot read property 'css' of undefined

Поэтому, пожалуйста, скажите мне, что мне здесь не хватает.


person Jithin    schedule 13.01.2016    source источник
comment
я сделал это .. и это сработало для меня .. app.directive('loadImages', function() { return { restrict: 'A', link: function(scope, element, attrs) { $(element).materialbox(); } }; });   -  person freshtoUI    schedule 28.06.2017