AngularJS - 将选定的项目数据传递给编辑表单答案

【问题标题】：AngularJS - passing selected item data to an edit formAngularJS - 将选定的项目数据传递给编辑表单
【发布时间】：2016-04-13 01:24:16
【问题描述】：

我正在 angularJS 中添加/编辑表单。我有一个模板来显示项目列表和另一个包含表单的模板。如果我想添加一个项目，那么它可以工作，但我在更新项目时遇到了问题。这是我声明的路由，使用一个控制器来处理有关类别的所有内容。

$routeProvider.when('/category', {templateUrl:'templates/category.html', controller: 'categoryCtrl'});
$routeProvider.when('/category/:categoryId?', {templateUrl:'templates/editcategory.html', controller:'categoryCtrl'});

在我的 category.html 模板中，我有一个要添加的按钮（重定向到编辑模板）。

<button class="btn btn-primary" ng-click="createCategory()">Add Category</button>

一个编辑按钮：每个项目一个按钮。

<button class="btn btn-warning" ng-click="editCategory(category)">Edit</button>

这是用于添加/编辑的editCategory.html模板。

<div class="container">
<form class="form-horizontal" id="categoryForm" name="categoryForm" ng-controller="categoryCtrl" >
    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
            <input type="text" name="name" ng-model="category.name" class="form-control" required></input>
            <span ng-show="form.name.$dirty && form.name.$error.required">Category name is required</span>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" value="submit" class="btn btn-primary"  ng-click="addCategory(category)" 
            ng-disabled="categoryForm.$invalid">Create Category</button>
            <button type="btn" value="cancel" class="btn btn-danger" ng-click="cancelBtn()">Cancel</button>
        </div>
    </div>
</form>
</div>

还有我的 categoryCtrl ：

myApp.controller('categoryCtrl', function($scope, $http, $location) {
    $scope.title ="Categories";
    $scope.categories = [];


    $scope.addCategory = function(category){
        $http.post('http://localhost/myappi/API/index.php/Api/categories',category).
                success(function(data) {
                    $scope.categories.push(data);
                })
                .error(function(err) {
                    console.log(err);
                })
                $location.path('/category');

    };
    $scope.editCategory = function(categoryData)
    {
        var id = categoryData.id;
        $scope.category = {};
        $scope.category = categoryData;
        console.log('scope data is ', $scope.category);
        $location.path('/category/'+id);
    };

    //go to the form to add a new category
    $scope.createCategory = function() {
        $location.path('/category/'+'new');
    };
});

我认为设置 $scope.category = category 也会使用该值填充表单字段。我对添加/编辑都使用相同的路线和模板也很好吗？

【问题讨论】：

有什么问题？你走对了……
您做得对，如果可以的话，我建议您转到 $stateProvider...
当我单击编辑时：例如，路由器从 ../category 更改为 ../category/10 并转到 editCategory.html 模板，但表单字段为空。
天哪！您没有将数据保存在任何地方.. 使用服务或发出 http 请求以获取该 id 的数据
@RayonDabre 在我将 categoryData 分配给它之后的 console.log($scope.category) 显示 Object { id: "5", name: "Business", $$hashKey: "object:5" }

标签： javascript angularjs angularjs-scope angular-ngmodel

【解决方案1】：

简单地说，当路由发生变化时，类别控制器被重新初始化，它的 $scope 也是如此。考虑将数据保存在工厂或服务中。 http://www.angulartutorial.net/2014/03/communicate-with-controllers-in-angular.html

【讨论】：

【解决方案2】：

您可以使用 $broadcast 服务并在其中传递对象或使用自定义服务来持久化数据。

非常不推荐使用自定义服务来持久化数据，因为如果页面刷新，服务变量会丢失它们的值，因此使用自定义服务来维护状态是非常不可靠的。要在不同控制器之间传递数据，请改用 $broadcast。例如，您可以通过以下方式从控制器广播事件：

$rootScope.$broadcast("editItem",{"category": yourValue});

在其他控制器中，您甚至可以通过以下方式捕获它：

$scope.$on("editItem", function(event, args) {
  console.log(args.category);
})

【讨论】：