需要调试/外部建议。 Angular not working

因此，我的老师认为，在第二周学习Angular JS时，扔掉本地存储和所有这些伟大的废话都是一个好主意，并且基本上告诉我们要复制她的代码，但改变它的名字（好像这就是学习）。但无论如何，我不知道如何使用角js除了一些概念，我需要帮助找到我的代码中的问题。任何输入都会有帮助。到目前为止，它看起来好像来自表单的信息没有被输入到它将被显示的html。这是我的js小提琴。任何输入是极大的赞赏需要调试/外部建议。 Angular not working

http://jsfiddle.net/g3tg5L15/1/

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

app.controller("EmployeeController", function($scope, DataService){ 

$scope.empInfo = DataService.getEmpInfo(); 
$scope.newempInfo = {}; 

$scope.addNewEmpInfo = function(){ 
    DataService.saveEmpInfo($scope.newempInfo.employee,  $scope.newempInfo.street, 
     $scope.newempInfo.city,$scope.newempInfo.state, $scope.newempInfo.zip); 

    $scope.newempInfo = {}; 
}; 
$scope.removeEmpInformation = function(index){ 
    DataService.removeEmpInfo(index); 
}; 
$scope.clearInfo = function(){ 
    DataService.destroyLocalStorage(); 
}; 
}); 

angular.module('myApp').service("DataService", function(){ 
var empInfoArray = []; 

this.getEmpInfo = function(){ 
    var employeeInfoArray = JSON.parse(localStorage.getItem("employeeInformationLS")) || []; 
    var empInfoArray = employeeInfoArray; 

    return empInfoArray; 
}; 

this.saveEmpInfo = function(aName, aStreet, aState, aCity, aZip){ 
    var savedEmpInfo = {employee : aName, street : aStreet, state : aState, city : aCity, zip : aZip}; 

    empInfoArray.push(savedEmpInfo); 
    localStorage.setItem("employeeInformationLS", JSON.stringify(empInfoArray)); 
}; 

this.removeEmpInfo = function(aIndex){ 
    empInfoArray.splice(aIndex, 1); 
    localStorage.setItem("employeeInformationLS",  JSON.stringify(empInfoArray)); 
}; 

this.destroyLocalStorage = function(){ 
    empInfoArray.splice(0); 
    localStorage.clear(); 
}; 

});

来源

2015-09-11 the_lonely_doge

你有什么问题吗？ –

@AjinderSingh是的，我面临的问题。我在描述中这样说。 –

的主要原因为缺乏响应和调试能力是由于AngularJS没有正确加载。要加载它，必须将jsFiddle的左侧菜单栏中的下拉列表从onLoad更改为No wrap - in <body>以正确加载Angular（如以下屏幕截图所示）。

以下猜测调试代码时，我观察到的问题。

DataService中的getEmpInfo函数在每次调用时会返回一个新数组，以防止Angular有效地监控其变化。而不是每次调用localStorage时检查它的函数都应该返回本地数组。当服务第一次初始化时，可以从localStorage简单地加载数组。

以下小提琴更新演示了这个http://jsfiddle.net/g3tg5L15/6/。实施变动如下：

变化从onLoad的jsfiddle的菜单栏No wrap - in <body>下拉正确加载角。

新增NG-点击employeeInfo头为“添加条目”按钮，在HTML

<!-- Added ng-click to call addNewEmpInfo function on scope --> 
<button ng-click='addNewEmpInfo()'>Add Entry</button>

修订文本，以员工的名字，而不是硬编码的价值及其附加值NG-点击HTML删除。

<!-- Amended to add.employee rather than hardcoded value --> 
<h3>{{add.employee}}</h3> 
<!-- Added ng-click to call removeEmpInformation function on scope --> 
<button ng-click='removeEmpInformation($index)'>X</button>

修订DataService在从localStorage的加载时，它被初始化而不是初始化为空数组。
```
var empInfoArray = JSON.parse(localStorage.getItem("employeeInformationLS")) || []; 
```

修改getEmpInfo对象只返回本地阵列

this.getEmpInfo = function(){ 
    return empInfoArray; 
};

如果需要，您还可以观看事件触发时localStorage的变化，包括在上述小提琴。如果打开多个选项卡，这将从不同的选项卡/窗口中选择更改。为了监控这些你必须：

包括在DataService在

angular.module('myApp').service("DataService", function($window, $timeout){

服务$窗口和$超时当收纳变化时添加一个触发器。

//Watch for storage events indicating changes to storage 
angular.element($window).on('storage', function(event) { 
    //Check if the storage change was for our key 
    if (event.key === 'employeeInformationLS') { 
     //In a timeout (i.e. on next digest) update the array 
     //This could be done in a smarter way rather than clearing 
     //and rebuilding the entire array 
     $timeout(function(){ 
      empInfoArray.splice(0); 
      var newArr = JSON.parse(localStorage.getItem("employeeInformationLS")) || []; 
      for (var i=0; i<newArr.length; i++){ 
       empInfoArray.push(newArr[i]); 
      } 
     }); 
    } 
});

来源

2015-09-12 02:12:39

需要调试/外部建议。 Angular not working

回答

相关问题