Question

我正在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也会使用值填充表单字段。使用相同的路线和模板进行添加/编辑也是一件好事吗？

Answer 1

简单地说，当路线改变时，类别控制器被重新初始化，其范围也是如此。考虑在工厂或服务中保留数据。 http://www.angulartutorial.net/2014/03/communicate-with-controllers-in-angular.html

Answer 2

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

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

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

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

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

AngularJS - 将所选项目数据传递到编辑表单

2 个答案: