我在控制器中的功能有效但不更新视图（Angularjs）答案

【问题标题】：My function in my controller works but does not update the view (Angularjs)我在控制器中的功能有效但不更新视图（Angularjs）
【发布时间】：2017-01-19 13:37:46
【问题描述】：

我有一些字段，它们可以编辑。用户可以使用“取消”按钮取消编辑模式：

<button ng-click="cancelEdit();" ng-show="editable">
    <i class="fa fa-remove"></i> Cancel
</button>

ng-click 事件调用函数cancelEdit()。

$scope.cancelEdit = function(){
    $scope.editable=false;
    $scope.jobNameInput = $scope.jobToView.name;
    $scope.selectedPriority = $scope.jobToView.priority;
    $scope.jobCommentsInput = $scope.jobToView.comments;
}

在这个函数中，我只想将编辑模式的布尔变量设置为 false 并将我的输入值重新初始化为默认值（在编辑模式之前）。调用此函数后，控制器的值会更新，但在我看来不是：

<button ng-click="editable=true;" ng-show="!editable">
    <i class="fa fa-edit"></i> Edit
</button>

当变量 editable 设置为 false 时显示此按钮。因此，理论上，当我单击取消按钮时，必须显示按钮编辑并且我的输入应该更新。为什么不是这样？

【问题讨论】：

你能展示你如何绑定$scope.jobNameInput 和视图中的其他值吗？ $scope.jobToView.name 的价值是什么？如果你能做一个剪断或 plnkr，那就太好了。所以我们可以更好地为您提供帮助。
mmm 试试这样设置 ng-click="editable=true;"不在按钮中，但有一个功能.. 所以 ng-click="setEditTrue()" 然后 $scope.setEditTrue= function(){ $scope.editable=true; }
尝试将可编辑变量替换为对象的属性，而不是作为$scope的属性，例如：buttonEditable = {value:true};然后在你的html中：ng-click="buttonEditable.value=true"
当我尝试做 plunker 时，它奏效了。我认为这是一个与我仅在用户在使用 ng-class 之前单击按钮时才显示这些输入的事实相关的问题（已检查 / ！已检查）。输入示例：<input type="text" ng-model="jobCommentsInput" ng-value="jobToView.comments" ng-disabled="!editable" />

标签： angularjs view controller

【解决方案1】：

原语是不可变的 - 即它的值不能通过调用它的函数来改变。

您的 $scope.editable 是一个原始的 boolean 变量。这就是视图没有更新的原因。它的值只有在你的函数关闭时才会改变。

要将其应用到您的视图中，您应该将其更改为非原始值。如果您将其设置为对象的属性，则可以做到这一点。

例如

$scope.isEditable = {
  value:false
}

然后玩弄那个对象。在你的情况下：

取消按钮：

<button ng-click="cancelEdit();" ng-show="isEditable.value">
    <i class="fa fa-remove"></i> Cancel
</button>

编辑按钮：

<button ng-click="isEditable.value=true;" ng-show="!isEditable.value">
    <i class="fa fa-edit"></i> Edit
</button>

功能：

$scope.cancelEdit = function(){
    $scope.isEditable.value = false;
    $scope.jobNameInput = $scope.jobToView.name;
    $scope.selectedPriority = $scope.jobToView.priority;
    $scope.jobCommentsInput = $scope.jobToView.comments;
}

【讨论】：

谢谢！我不知道原始类型是不可更新的。在输入方面，你有什么想法吗？因为，在这种情况下，我使用了 jobToView 对象。
您可以遵循相同的策略。例如job = {name:"", priority:"", comments:""}。然后在视图中使用这个对象的属性。
我已经在我的视图中使用了我的 jobToView 对象。但是当我逐步执行我的 cancelEdit 函数时，我输入的值已经等于我的默认值。好像他没有看到我在编辑它们时所做的更改。在显示时，通过我的函数后，它会保留我所做的修改。

【解决方案2】：

感谢 Korte 对布尔变量的回答。为了完成，关于输入，我找到了我的问题的答案。只需在控制器中声明：var vm = this;；

简单地说，在输入模型中，写：ng-model="vm.jobCommentsInput"

我认为输入被视为我的布尔变量，它们需要是对象。

【讨论】：