Angular material gridlist with dynamic text works in codepen but not on my server

Question

I've modified the Angular material gridlist demo to add static and dynamic texts to the grid tiles. This works for me in codepen (see my link below) but not on my server.

On my server the static text shows up but not the dynamic text. So in the next line the "Static" shows up, but not the tile.title

      Static {{tile.title}}

I've verified that all the scripts and links are the same as added in settings for codepen. The grid tiles all appear with the randomColor as in the demo and with the static text that I've added, just not the dynamic text.

Any Ideas? Thanks for any suggestions you might have - I've been looking at this for some time...

Link to my codepen http://codepen.io/Rogsco/pen/LbNBZW

Server code, same as on codepen, below:

html:

<!doctype html>
<html lang="en" >
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <!-- Angular Material requires these Angular.js Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
    <!-- Angular Material Library -->
    <script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
    <!-- Angular Material style sheet -->
    <link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">

    <script src="/js/controllers/SdkTestPageCtrl.js"></script>

</head>
<body>

<<div ng-controller="SdkTestPageCtrl as appCtrl" ng-cloak="" class="gridListdemoResponsiveUsage" ng-app="sdkTestApp">
    <md-content layout-padding="">
        <md-grid-list md-cols-gt-md="12" md-cols="3" md-cols-md="8" md-row-height-gt-md="1:1" md-row-height="4:3" md-gutter-gt-md="16px" md-gutter-md="8px" md-gutter="4px">
            <md-grid-tile ng-repeat="tile in appCtrl.colorTiles" ng-style="{
            'background': tile.color
          }" md-colspan-gt-sm="{{tile.colspan}}" md-rowspan-gt-sm="{{tile.rowspan}}">
                Static{{tile.title}}
            </md-grid-tile>
        </md-grid-list>
    </md-content>
</div>

</body>
</html>

js

    angular.module('sdkTestApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
    .controller('SdkTestPageCtrl', function($scope) {

        'use strict';

        var COLORS = ['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', 
                        SKIPPED Some colors here....  ];

        this.colorTiles = (function() {
            var tiles = [];
            for (var i = 0; i < 46; i++) {
                tiles.push({
                    color: randomColor(),
                    colspan: randomSpan(),
                    rowspan: randomSpan(),
                    title: getTitle(i)
                });
            }
            return tiles;
        })();

        function getTitle(i) {
            if (i === 0) {
                return ":Dynamic 1";
            } if (i === 3) {
                return ":Dynamic 2";
            } if (i === 6) {
                return ":Dynamic 3";
            }
            return "";

        }

        function randomColor() {
            return COLORS[Math.floor(Math.random() * COLORS.length)];
        }

        function randomSpan() {
            var r = Math.random();
            if (r < 0.8) {
                return 1;
            } else if (r < 0.9) {
                return 2;
            } else {
                return 3;
            }
        }

});

Answer 1

Finally figured out the problem - same as answer to this one Another problem caused by swig/angular conflict

So it turns out web site uses swig which conflicts with angularjs.

It uses swig for template var which was conflicting with angularjs' use of {{}}, preventing display of text in gridlist. Fix by using ng-bind instead of {{}}. (Of course no one could help me with this since they couldn't look at what my server uses .....)

Another fix to swig/angular conflict if you don't want to use ng-bind

Angular material gridlist with dynamic text works in codepen but not on my server

Question

1 answers

solution1
0 ACCPTED 2017-11-10 22:41:14

Angular material gridlist with dynamic text works in codepen but not on my server

Question

1 answers

solution1 0 ACCPTED 2017-11-10 22:41:14

solution1
0 ACCPTED 2017-11-10 22:41:14