Question

这是一个截断视图和控制器的代码。在这里，我只想点击保存按钮，我的意思是

<input class="btn btn-primary btn-lg mr-r15" type="button"
 ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
 ng-disabled="formSubmitted" value="{{saveButton}}" />

请求将被发送到服务器，当获得成功时，必须隐藏标记并且

标记将显示但不能正常工作

HTML：

<div class="clearfix mr-b25 bdr-b">
    <h6 class="mr-tb20">Release Notes &nbsp;&nbsp;
        <a ng-if="isEditabel == false" href="" ng-click="$parent.isEditabel = true"
        class="f-14 semi-bold mr-l15"> Edit </a>
    </h6>
</div>
<p ng-show="!isEditabel" class="form-control-static f-14">{{latestReleaseNotes}}</p>


<div ng-show="isEditabel">
    <textarea ng-model="latestReleaseNotes" rows="3" columns="15"
    class="form-control" ng-disabled="formSubmitting"></textarea>
    <br /> <input class="btn btn-primary btn-lg mr-r15" type="button"
    ng-click="$parent.saveReleaseNotes(latestReleaseNotes,isEditabel);$apply()"
    ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
    type="button" ng-click="isEditabel = false" id="backLink"
    class="btn btn-link btn-lg" value="Cancel">
</div>

在控制器中：

$scope.saveReleaseNotes = function(latestReleaseNotes,isEditabel) {
    $scope.backgroundWorking = true;
    $scope.saveButton = 'Updating...';
    $http({
        url: '/apps/'+$scope.app.id+'.json',
        method: "PUT",
        data: {
            releaseNotes: latestReleaseNotes,
            appBuildId:$scope.app.latestBuild.id
        },
        headers: {
            'Content-Type': 'application/json'
        }
    }).success(function(data, status, headers, config) {
        if (data.result == "success") {
            flash.showSuccess(data.message);
            $scope.isEditabel = false;
        } else {
            flash.showError(data.message);
            $scope.latestReleaseNotes = $scope.app.latestBuild.releaseNotes;
        }
        $scope.backgroundWorking = false;
        $scope.saveButton = 'Save';
    }).error(function(data, status, headers, config) {
        flash.showError("Error occued while updating release notes");
        $scope.backgroundWorking = false;
        $scope.saveButton = 'Save';
    });
}

但是模型isEditable未在视图中更新。我需要隐藏<div>代码并在成功时显示<p>代码。我正在$scope.isEditabel = false;尝试，但它无效。

Answer 1

我认为您的问题是您在使用$parent.isEditable和isEditable.之间切换。我的第一个建议是保持一致。 Idealy isEditable包含在您使用它的范围内。总是引用父母的“isEditable”似乎有点奇怪。

如果父母确实包含isEditable，则需要注意设置$scope.isEditable = true。您最终可以在子范围上重新声明它。我总是建议使用像setIsEditable(true)这样的函数，并在父作用域中定义它。

尝试根据你给我们的东西为你创造一个小提琴..但我认为下面的代码可行。

//Parent scope
$scope.isEditabel = false;
$scope.setIsEditabel = function(value){
    $scope.isEditabel = value;
}

 <!-- updated html  -->

<div class="clearfix mr-b25 bdr-b">
    <h6 class="mr-tb20">Release Notes &nbsp;&nbsp;
        <a ng-if="$parent.isEditabel == false" href="" ng-click="$parent.setIsEditabel(true)"
        class="f-14 semi-bold mr-l15"> Edit </a>
    </h6>
</div>
<p ng-show="!$parent.isEditabel" class="form-control-static f-14">{{latestReleaseNotes}} 
</p>


<div ng-show="$parent.isEditabel">
    <textarea ng-model="latestReleaseNotes" rows="3" columns="15"
        class="form-control" ng-disabled="formSubmitting">
     </textarea>
    <br /> 
    <input class="btn btn-primary btn-lg mr-r15" type="button"
        ng-click="$parent.saveReleaseNotes(latestReleaseNotes,$parent.isEditabel);$apply()"
        ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
        type="button" ng-click="$parent.isEditabel = false" id="backLink"
        class="btn btn-link btn-lg" value="Cancel"/>
</div>

更好的解决方案（总是值得商榷）* ：我创建了一个myModel这不是必需的，但它确实清理了一些东西，特别是。如果你必须在同一页面上有多个可编辑的东西。

我们不必担心传递isEditable到保存，我们不应该担心apply.一般建议是让你的html dumber ..

//child scope
$scope.myModel = {
    latestReleaseNotes: latestReleaseNotes,
    isEditabel: false
}
$scope.saveReleaseNotes = function(){ 
   //do save 
   //we have everything we need on $scope (myModel, isEdiabel, etc.)
}

 <!-- updated html  -->

<div class="clearfix mr-b25 bdr-b">
    <h6 class="mr-tb20">Release Notes &nbsp;&nbsp;
        <a ng-if="myModel.isEditabel == false" href="" ng-click="myModel.isEditabel = true"
        class="f-14 semi-bold mr-l15"> Edit </a>
    </h6>
</div>
<p ng-show="!myModel.isEditabel" class="form-control-static f-14">{{myModel.latestReleaseNotes}} 
</p>


<div ng-show="myModel.isEditabel">
    <textarea ng-model="myModel.latestReleaseNotes" rows="3" columns="15"
        class="form-control" ng-disabled="formSubmitting">
     </textarea>
    <br /> 
    <input class="btn btn-primary btn-lg mr-r15" type="button"
        ng-click="saveReleaseNotes(myModel);"
        ng-disabled="formSubmitted" value="{{saveButton}}" /> <input
        type="button" ng-click="myModel.isEditabel = false" id="backLink"
        class="btn btn-link btn-lg" value="Cancel"/>
</div>

更新AngularJS中的模型值？

1 个答案: