具有动态文本的角材料网格表在相互依赖中工作，但不在我的服务器上

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

本文关键字：工作 依赖 服务器 我的 文本 动态 网格 材料      更新时间：2023-09-26

我已经修改了Angular材料网格列表演示，为网格块添加静态和动态文本。这适用于我在codepen(见下面我的链接)，但不是在我的服务器。

在我的服务器上显示静态文本，但不显示动态文本。所以下一行显示了"Static"，但没有显示title .title

      Static {{tile.title}}

我已经验证了所有的脚本和链接都是相同的添加在设置codependency。所有的栅格都显示为随机颜色，就像在演示中一样，还有我添加的静态文本，而不是动态文本。

任何想法?谢谢你的任何建议-我已经看了一段时间了…

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

服务器端代码，与codependency相同，如下:

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;
            }
        }
});

终于弄清楚问题了-和这个问题的答案一样，又是一个由swig/angular冲突引起的问题

所以原来网站使用swig，这与angularjs冲突。

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

如果你不想使用ng-bind
，可以修改swig/angular冲突
相关文章：