Question

我无法调试我未编写的代码并了解问题的来源（我不是一个有角度的开发人员）。我有以下内容：一个主控制器，它初始化一个无线电对象：刷新窗口时调用它：

    $scope.radio_structure = {
        data: {
            localisations: []
        },
        streams: []
    };

    $scope.stream_structure = {
        url: ""
    };


    $scope.localisation_structure = {
        continent: "",
        country: "",
        city: ""
    }
    $scope.radio = angular.copy($scope.radio_structure);

还有一个提交表格数据的功能。

    $scope.submit = function () {
        console.log($scope.radio);
        radioFact.add($scope.radio).then(
            function (success) {
                flashesFact.show(success.data);
                $location.url('/search');
            },
            function (error) {
                console.log(error);
                var response = {
                    type: 'danger',
                    msg: error.status + ' => ' + error.statusText
                }
                flashesFact.show(response);
            }
        );
    };

在我的添加控制器中，我进行了以下初始化：

    // Init stream data structure
    $scope.radio.streams.push(angular.copy($scope.stream_structure));
    // Init localisation data structure
    $scope.radio.data.localisations.push(angular.copy($scope.localisation_structure));

数据与ng-model捆绑在一起：

<div class="col-sm-10">
    <input id="name" type="text" name="name" class="form-control" ng-model="radio.data.name"
           ng-required="true"
           placeholder="{{'RADIO_NAME_PH' | translate}}">
    <span class="glyphicon glyphicon-ok form-control-feedback feedback-success"
          ng-show="suggest.name.$valid"></span>
    <span class="glyphicon glyphicon-remove form-control-feedback feedback-error"
          ng-show="suggest.name.$invalid"></span>

    <p ng-show="suggest.name.$error.required && !suggest.name.$pristine" class="help-block">
        {{'RADIO_NAME_MISERR' | translate}}
    </p>
</div>

触发表单的提交按钮提交：

<button type="submit" id="submit" name="submit"
        class="col-sm-offset-2 col-sm-3 btn btn-success" ng-disabled="suggest.$invalid"
        ng-click="submit($event)">
    {{'FORM_SUBMIT' | translate}}
</button>

触发提交时调用的方法：

    radio.add = function (data) {
        var path = '*****';
        return $http({
            method: 'POST',
            url: '*****' + path,
            data: data,
            headers: {
                'path': path
            }
        });
    };

问题如下：当我第一次提交表单数据时，它按预期工作。但是，在提交表单后，我可以决定发送一个新表单，如果我这样做，并且我在表单中设置了新值，则不会重置值，并且我会在第一次提交时提交相同的数据。

我的理解是与范围存在冲突

Answer 1

首先，在init函数中定义起始位置：

$scope.init = function() {
    $scope.radio_structure = {
        data: {
            localisations: []
        },
        streams: []
    };

    $scope.stream_structure = {
        url: ""
    };


    $scope.localisation_structure = {
        continent: "",
        country: "",
        city: ""
    }
    $scope.initRadio();
}

$scope.initRadio = function() {
    $scope.radio = angular.copy($scope.radio_structure);
}

$scope.init();

成功提交后再次执行init：

$scope.submit = function () {
    console.log($scope.radio);
    radioFact.add($scope.radio).then(
        function (success) {
            flashesFact.show(success.data);
            $scope.initRadio();
            $location.url('/search');
        },
        function (error) {
            console.log(error);
            var response = {
                type: 'danger',
                msg: error.status + ' => ' + error.statusText
            }
            flashesFact.show(response);
        }
    );
};

提交表单时$ scope冲突

1 个答案: