具有动态文本的角度材质网格列表可在Codepen中使用，但不能在我的服务器上使用

Question

我已经修改了Angular材质网格列表演示，以向网格图块添加静态和动态文本。 这对我来说在Codepen中有效（请参见下面的链接），但在我的服务器上不起作用。

在我的服务器上显示静态文本，但不显示动态文本。 因此，在下一行中会显示“静态”，但不会显示tile.title

      Static {{tile.title}}

我已经验证所有脚本和链接都与在Codepen设置中添加的相同。 网格砖都与演示中的randomColor和我添加的静态文本一起出现，而与动态文本一起出现。

有任何想法吗？ 感谢您提出的任何建议-我已经研究了一段时间...

链接到我的Codepen http://codepen.io/Rogsco/pen/LbNBZW

服务器代码，与下面的代码笔相同：

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

终于找到了问题所在-与此答案相同另一个由弯弯/角冲突引起的问题

因此，事实证明网站使用了与angularjs冲突的swig。

它对模板var使用swig，这与angularjs使用{{}}冲突，从而阻止了网格列表中文本的显示。 通过使用ng-bind代替{{}}进行修复。 （当然，没有人可以帮我这个忙，因为他们看不到我的服务器使用了什么.....）

如果您不想使用ng-bind，则可以解决弯角/角度冲突

具有动态文本的角度材质网格列表可在Codepen中使用，但不能在我的服务器上使用

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-11-10 22:41:14

具有动态文本的角度材质网格列表可在Codepen中使用，但不能在我的服务器上使用

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-11-10 22:41:14

解决方案1
0 已采纳 2017-11-10 22:41:14