将对象保存到AngularJS

时间:2015-07-16 06:37:11

标签: javascript html angularjs

我一直在创建一个联系人列表网站,并且刚刚开始尝试实现添加联系人功能。到目前为止,我已经使用表单和输入元素创建了页面,然后使用ng-click调用一个函数,该函数理论上会将包含这些输入值的对象添加到控制器中已存在的数组中。出于某种原因,这不起作用,也没有添加任何内容。

特别是,我遇到了与partial / edit.html网页相关的js / app.js文件和$ scope.saveContact = function()。尝试添加联系人时单击“确认按钮”会调用saveContact函数,但结果未正确存储。任何帮助表示赞赏。

在我的HTML中,我有这个代码(在我的控制器中调用saveContact()函数。

<a href="#/"><div class="confirm col-xs-6" ng-click="saveContact()">
    <h3>Confirm</h3>
</div></a>

在我的app.js文件中,我有一个空对象的声明和一个包含已经有值的对象的数组(用于显示已经创建的联系人)。我正在尝试使用.push()添加到这些联系人,但由于某种原因它不起作用。

$scope.contact = { ... } //empty object that gets inputs from HTML
$scope.contacts = [ { ... }, ... ];
$scope.saveContact = function(){
    $scope.contacts.push($scope.contact);
};

这个底部函数无法将联系人对象推送到contacts数组,我不明白为什么。

2 个答案:

答案 0 :(得分:2)

这种情况正在发生,因为您已为所有路线分配了相同的控制器。你的saveContact函数工作正常,它将对象推送到数组。一旦路由改变,就会创建一个新的控制器实例,因此添加的对象将丢失。您应该创建一个服务(单例)来存储对象,并将服务作为依赖项注入控制器。这样,数组将一直持续到页面加载为止。

command = "am start -a android.intent.action.VIEW -d 'http://w18299:8009/Assignment/manage?assigner=57072352&unitID=6443&secret=asdasdasdasdasd&assignee=57072352'";

将其注入控制器并使用setContact和getContact方法更新联系人数组并检索联系人数组。

理想情况下,您的路线应该有单独的控制器。

答案 1 :(得分:1)

问题出在您的app.config代码中。您为所有模板使用相同的控制器。

这不是必需的,因为您已经在ng-controller附加了身体

中提到了相同的内容
  <body ng-controller="AppController">
    <div ng-view></div>
    <script src="js/app.js"></script>
  </body>

对所有路由使用相同的控制器基本上(重新)在路由更改时实例化控制器,这就是$scope.contacts.push($scope.contact);对路由/无效的原因从/add调用时。

contactListApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        controller: 'AppController',
        controllerAs: 'list',
        templateUrl: 'partials/list.html'
      })
       .when('/add', {
        controller: 'AppController',
        controllerAs: 'add',
        templateUrl: 'partials/edit.html'
      })
       .when('/edit/:id', {
        controller: 'AppController',
        controllerAs: 'edit',
        templateUrl: 'partials/edit.html'
      })
      .otherwise({
        redirectTo: '/'
      });
}]);

解决方法:

对单独的路径使用单独的控制器,并使用服务存储对象

OR

只需从您的路线配置中移除控制器和控制器,您就可以开始使用了。

更新了配置:

contactListApp.config(['$routeProvider', '$locationProvider',
  function($routeProvider, $locationProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'partials/list.html'
      })
       .when('/add', {
        templateUrl: 'partials/edit.html'
      })
       .when('/edit/:id', {
        templateUrl: 'partials/edit.html'
      })
      .otherwise({
        redirectTo: '/'
      });
}]);