Question

我修改了Angular材质gridlist演示，将静态和动态文本添加到网格图块中。这在codepen中适用于我（请参阅下面的链接），但不适用于我的服务器。

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

      Static {{tile.title}}

我已经验证所有脚本和链接与在codepen的设置中添加的相同。网格图块都与randomColor一样显示在演示中，并且使用我添加的静态文本，而不是动态文本。

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

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

服务器代码，与codepen相同，如下：

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

最后找出了问题 - 与答案Another problem caused by swig/angular conflict

相同

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

它使用swig作为模板var，与angularjs使用{{}}冲突，阻止在gridlist中显示文本。使用ng-bind而不是{{}}进行修复。（当然没有人可以帮助我，因为他们无法查看我的服务器使用的内容.....）

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

具有动态文本的Angular材料网格列表在codepen中工作，但不在我的服务器

1 个答案: