[英]Angular app does not start
我在另一個頁面中復制了有效的解決方案,但是由於某種原因它無法正常工作; 這是一個測試代碼:
<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)從未調用過。
就像沒有加載角度庫一樣。 怎么了?
您缺少ng-app="myapp"
並且也更改了ng-repeat
<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>
您應該添加ng-app="myapp"
以啟動AngularJS。
您的代碼試圖將變量設置為AngularJS世界之外的Angular代碼:您不能。 但是幸運的是,您並沒有真正設置var printOperation
:在實例化控制器時直接調用該函數。
注意,我對您的表進行了一些更改以使其可顯示。
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.