javascript - 在 Angular 中首次渲染后如何打破数据绑定(bind)？

Question

我的网站上有一个页面，我想在其中显示一个复选框。如果模型最初为假，我只想显示复选框。所以我写了这个(这是我的初始代码，但它是我自己的简化版本。我更新了这个问题末尾片段中的代码以显示问题):

<div ng-if="!the_field">
    <input ng-model="the_field" type="checkbox">
</div>

问题是，如果我单击复选框，它就会消失。这当然是有道理的，但我不知道如何解决这个问题。

所以我基本上想要的是，如果在呈现 HTML 时模型为假，则显示复选框。但在那之后我想以某种方式打破数据绑定(bind)，以便即使模型更改为 true，复选框仍保留在页面上。

有谁知道我怎样才能做到这一点？欢迎所有提示!

[编辑]我更喜欢在模板中执行此操作，这样我就不会得到这些字段的双重列表(因为我有大约 50 个)。有什么想法吗？

[编辑 2]事实证明它确实适用于上面的示例，它是我自己代码的简化版本。然而，在我自己的代码中，我没有使用简单的字段，而是字典中的一个项目。我更新了上面的代码并在下面制作了一个片段来显示问题:

var MainController = function($scope){
    $scope.the_field = {};
    $scope.the_field.item = false;
};

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="MainController">
  parent: {{the_field.item}}
  <div ng-if="!the_field.item">
    child: {{the_field.item}}<br>
    <input ng-model="the_field.item" type="checkbox">
  </div>
</div>

Answer 1

您可以克隆源对象。像这样:

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.the_field = false;
  $scope.the_field_clone = angular.copy($scope.the_field);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{the_field}}
  <div ng-if="!the_field_clone">
    <input ng-model="$parent.the_field" type="checkbox">
  </div>
</div>

http://jsbin.com/ditoka/edit?html,js

更新 - 选项 2 - 指令

angular.module('app', []).
controller('ctrl', function($scope) {
  $scope.the_field = false;
}).
directive('customIf', function() {
  return {
    scope: {
      customIf: '='
    },
    link: function(scope, element, attrs) {
      if (!scope.customIf) {
        element.remove();  
      }
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  {{the_field}}
  <div custom-if="!the_field">
    <input ng-model="the_field" type="checkbox">
  </div>
</div>