0

I’ve been having a problem with a scope property in my controller – a simple test title and an array of strings used with ng repeat. They are not being displayed on the screen when served up from our rather complex server. Note that with ng repeat it seems to know the size of the array, just doesn’t display it, see first example below.

They are being displayed correctly when served up from apps like codepen or plunker. It also works when I run it on localhost using a simple server. See working version in 2nd example below.

I know responders will protest that they cannot help without more specific information about our server - but I'm guess I'm asking specifically:

  1. Have you seen a case where ng repeat seems to know the size of the array, but just doesn’t display the items in the array - if so what caused it?

  2. What types of issues with our server do you think could cause this? What should I be looking for..

    Non working example from our server

Working example from codepen or simple server on localhost

var app = angular.module('testApp', []);
angular.module('testApp').controller('AuthorizePageCtrl', ['$scope', function ($scope) {

    'use strict';

    $scope.mytesttitle = "this is a test";

    $scope.myitems = [
        "Alfreds Futterkiste",
        "Berglunds snabbköp",
        "Centro_comercial Moctezuma"
    ];

}]);
<!DOCTYPE html>
<html data-ng-app="testApp">

<head>
    <meta charset="utf-8" />
    <script data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="/js/controllers/AuthorizePageCtrl.js"></script>
</head>

<body>

<div id="consent" ng-app="testApp">

    <div ng-controller="AuthorizePageCtrl">
        <h3>My test title should appear->{{mytesttitle}}</h3>

        <div>
            <ul>
                <li ng-repeat="myitem in myitems">"myitem in myitems should appear->"{{myitem}}</li>
            </ul>
        </div>

        <div  ng-repeat="myitem in myitems">
            <h2>"myitem in myitems should appear->"{{myitem}}</h2>
        </div>
    </div>
</div>

</body>

</html>
aydinugur
  • 1,208
  • 2
  • 14
  • 21
rogsco
  • 1
  • 2

2 Answers2

1

so first data-ng-app and ng-app they are the same. and you only need one. and for the JS i may this changes and it works for me.

Angular part:

var app = angular.module('app', []);
app.controller('AuthorizePageCtrl', ['$scope', function ($scope) {

$scope.mytesttitle = "this is a test";

$scope.myitems = [
"Alfreds Futterkiste",
"Berglunds snabbköp",
"Centro_comercial Moctezuma"
];
}]);

HTML part:

<!DOCTYPE html>
<html ng-app="app">

<head>
<meta charset="utf-8" />
<script  src="//code.angularjs.org/1.6.6/angular.js" ></script>
<script  src="app.js" ></script>
</head>

<body>

<div id="consent" >

<div ng-controller="AuthorizePageCtrl">
<h3>My test title should appear->{{mytesttitle}}</h3>

    <div>
        <ul>
            <li ng-repeat="myitem in myitems">"myitem in myitems 
 should appear->"{{myitem}}</li>
        </ul>
    </div>

    <div  ng-repeat="myitem in myitems">
        <h2>"myitem in myitems should appear->"{{myitem}}</h2>
    </div>
  </div>
   </div>

 </body>

 </html>`enter code here`
Pranjal Bikash Das
  • 1,092
  • 9
  • 27
Angel GaBriiel Munoz
  • 11
  • 1
0

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 this very simple example from working. Thanks for responses ....

See this other fix for swig/angular conflict if you don't want to use ng-bind

rogsco
  • 1
  • 2