Angular app does not start

Question

I copied a working solution in another page, but for some reason it does not work; this is a test code:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl" ng-app="myapp">
    <table name="commentsTable">
        <tr ng-repeat="item in items = obj track by $index">
            <td class="plantCell">{{items[$index].nome}}: </td>
            <td class="statusCell">{{items[$index].status}}</td>
            <td class="statusCell">{{items[$index].testo}}</td>
        </tr>
    </table>
</div>
<script language="javascript">
    var app = angular.module('myapp', []);
    var printOperation;

    function GetFromLocalStorage(key) {
        var items = localStorage.getItem(key);
        console.log(items);
        if (items === null) {
            console.log("item null");
            return null;
        } else {
            if (typeof items != "string") {
                items = JSON.stringify(items);
            }
            return items;
        }
    }
    app.controller('MyCtrl',
        function($scope) {
            $scope.printComments = function() {
                $scope.obj = [{
                    "nome": "first",
                    "status": 1,
                    "testo": "Rottura rullo 1!!!"
                }, {
                    "nome": "second",
                    "status": 0,
                    "testo": "Rottura rullo fsdfsf!!!"
                }];
                console.log("ricevo evento");
                console.log($scope.obj);
            }
            console.log("assegno print operation");
            printOperation = $scope.printComments;
        }
    );
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
            var eventer = window[eventMethod];
            var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
            eventer(messageEvent,function(e) {
                console.log("ricevo messaggio");
                printOperation();
            },false);
</script>

For some reason all that appears is:

{{items[$index].nome}}: {{items[$index].status}} {{items[$index].testo}}

I have the following errors, like if the assignment were never made:

printOperation is not a function

function ($scope) never called.

Like if the angular library were not loaded. What is wrong?

score 4 · Answer 1 · edited Aug 08 '17 at 12:46

4

You are missing ng-app="myapp" and change your ng-repeat too

<div ng-app="myapp" ng-controller="MyCtrl">
    <table name="commentsTable">
        <tr ng-repeat="item in obj track by $index">
            <td class="plantCell">{{items[$index].nome}}: </td>
        <td class="statusCell">{{items[$index].status}}</td>
        <td class="statusCell">{{items[$index].testo}}</td>
    </tr>
    </table>
</div>

The printOperation is outside the scope of angular. Try to make everything within the scope of angular.

Don't use global variables.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="MyCtrl">
    <table name="commentsTable">
        <tr ng-repeat="item in obj track by $index">
            <td class="plantCell">{{item.nome}}: </td>
            <td class="statusCell">{{item.status}}</td>
            <td class="statusCell">{{item.testo}}</td>
        </tr>
    </table>
</div>
<script language="javascript">
    var app = angular.module('myapp', []);
    var printOperation;

    function GetFromLocalStorage(key) {
        var items = localStorage.getItem(key);
        console.log(items);
        if (items === null) {
            console.log("item null");
            return null;
        } else {
            if (typeof items != "string") {
                items = JSON.stringify(items);
            }
            return items;
        }
    }
    app.controller('MyCtrl',
        function($scope,$window) {
            $scope.printComments = function() {
                $scope.obj = [{
                    "nome": "first",
                    "status": 1,
                    "testo": "Rottura rullo 1!!!"
                }, {
                    "nome": "second",
                    "status": 0,
                    "testo": "Rottura rullo fsdfsf!!!"
                }];
                console.log("ricevo evento");
                console.log($scope.obj);
            }
            console.log("assegno print operation");
            $scope.printComments();
        }
    );
</script>

edited Aug 08 '17 at 12:46

cнŝdk

31,391
7
56
78

answered Aug 03 '17 at 13:11

Vivz

6,625
2
17
33

Thanks, I missed ng-app="myapp". I still have a problem with the calling of printOperation(); unfortunately I cannot call it inside the block as it is triggered by an event; is semplified my code. I am adding the rest now. Unfortunaly events seem no to enter the angular block. – Fabrizio Bartolomucci Aug 03 '17 at 13:31
Strangely in the other sample I did not have ng-app="myapp" and it worked all the same, that is why I did not add it in this case. Perhaps there are some details of angular I miss... – Fabrizio Bartolomucci Aug 03 '17 at 13:41
At any rate now my code works, for some reason. The event is recieved and the $scope function called. Yet the table is not loaded. DO I need to issue some reload ot something of the kind? – Fabrizio Bartolomucci Aug 03 '17 at 13:51
If you want to set something global in angulars scope, refer https://stackoverflow.com/questions/19383725/how-to-access-global-js-variable-in-angularjs-directive. – Vivz Aug 03 '17 at 13:57
The reason why your table is not loading is that printOperation won't be recognised as function outside angulars world. – Vivz Aug 03 '17 at 13:57
That sample is the reverse of what I need; my requirement is to call a scope function from outside , rather than the reverse. Now the problem is reloading the table, what I would like to do with $scope.commentsTable.reload() – Fabrizio Bartolomucci Aug 03 '17 at 14:05
Why don't you convert the final part of your code into angular and use it inside angular. Check the corresponding angular elements for that code – Vivz Aug 03 '17 at 14:10
The problem is that if I set the event handler inside the function scope it is not triggered. At any rate this is solved. Now my problem is reloading the table when the data is received: $scope.commentsTable.reload(); does not work. – Fabrizio Bartolomucci Aug 03 '17 at 14:28
You can check https://stackoverflow.com/questions/24460403/angular-js-call-scope-function-from-outside-the-controller and https://stackoverflow.com/questions/14298361/access-angular-objects-function-from-outside-js for more details – Vivz Aug 04 '17 at 07:24
I do not think any of them applies to my case. I am posting a new more specific question, it seems to have to do with threads.. – Fabrizio Bartolomucci Aug 04 '17 at 07:36
Specifically, how do I return to the main thread in Javascript? – Fabrizio Bartolomucci Aug 04 '17 at 07:48

score 1 · Answer 2 · answered Aug 03 '17 at 13:18

You should add ng-app="myapp" to launch AngularJS.

Your code is trying to set a variable to Angular code outside the AngularJS world: you can't. But fortunately, you don't really to set a var printOperation: call the function directly when the controller is instanciated.

Notice I changed a bit your table to make it showable.

var app = angular.module('myapp', []);

      function GetFromLocalStorage(key) {
        var items = localStorage.getItem(key);
        console.log(items);
        if (items === null) {
          console.log("item null");
          return null;
        } else {
          if (typeof items != "string") {
            items = JSON.stringify(items);
          }
          return items;
        }
      }
      app.controller('MyCtrl', function($scope) {
        $scope.printComments = function() {
          $scope.obj = [{
            "nome": "first",
            "status": 1,
            "testo": "Rottura rullo 1!!!"
          }, {
            "nome": "second",
            "status": 0,
            "testo": "Rottura rullo fsdfsf!!!"
          }];
          console.log("ricevo evento");
          console.log($scope.obj);
        }
        console.log("assegno print operation");
        $scope.printComments();
      });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  
 
<div ng-app="myapp" ng-controller="MyCtrl">
    <table name="commentsTable">
        <tr ng-repeat="item in obj">
            <td class="plantCell">{{item.nome}}: </td>
            <td class="statusCell">{{item.status}}</td>
            <td class="statusCell">{{item.testo}}</td>
        </tr>
    </table>
</div>

As I add in my code, I amy not call the function directly as I need another module to load the data to be loaded by websocket. So if I do it upfront, I find nothing. Unfortunately the final part of my code is not called if I set inside the block, for reason I do not know, for that matter. I found this solution on the web. — Fabrizio Bartolomucci, Aug 03 '17 at 13:37

Angular app does not start

2 Answers2