Angular应用程序无法启动

时间:2017-08-03 13:10:36

标签: javascript angularjs

我在另一个页面中复制了一个有效的解决方案,但由于某些原因它不起作用;这是一个测试代码:

<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>

出于某种原因,出现的一切是:

  

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

我有以下错误,比如从未进行过分配:

  

printOperation不是函数

     

函数($ scope)从未调用过。

就像没有加载角度库一样。有什么问题?

2 个答案:

答案 0 :(得分:4)

您遗失<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> 并更改了printOperation

<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>

{{1}}超出了角度范围。尽量使一切都在角度范围内。

不要使用全局变量。

&#13;
&#13;
{{1}}
&#13;
&#13;
&#13;

答案 1 :(得分:1)

您应该添加ng-app="myapp"以启动AngularJS。

您的代码正在尝试将变量设置为AngularJS世界之外的Angular代码:您无法做到。但幸运的是,你并没有真正设置var printOperation:在控制器实例化时直接调用该函数。

注意我改变了你的桌子以使其显示。

&#13;
&#13;
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();
      });
&#13;
<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>
&#13;
&#13;
&#13;