javascript - 从 ng-include 上的单独 Controller 设置时 $parent 变量损坏

Question

我很难理解为什么下面的代码完全停止工作。基本上，当我尝试使用 $parent 范围中的 ng-show 隐藏和显示 ng-include 时，它​​工作得很好。例如，在附加的 plnkr 中，如果您点击“新建”，然后点击“取消”，或者只是“切换”，ng-include 的可见性将被适当设置。

但是，如果我尝试从子范围取消设置可见性，它会工作一次，然后完全失败。当您点击 ng-include 中的“取消”按钮时，控制可见性的父范围中的变量“createItemVisible”会以某种方式损坏。

我已经阅读了许多关于 $parent 范围的其他帖子，但我从未见过一次提到它在哪里工作，然后就再也没有提到过。

plnkr 在这里 http://plnkr.co/edit/1tNpTzEBnTRHgvx6o0dc?p=preview

这是index.html代码:

<div ng-controller="MainCtrl">
<h3>Items</h3>

<button type="button" class="btn btn-primary" ng-click="createItem()">Create New Item</button>
<button type="button" class="btn btn-alert" ng-click="createItemVisible=!createItemVisible">Toggle</button>
<button type="button" class="btn btn-danger" ng-click="createItemVisible=false">Cancel</button>

<div ng-include="'inlineform.html'" ng-show="createItemVisible"></div>

</div>

这是 inlineform.html 代码:

<div ng-controller="ItemDetailCtrl">
  <button type="button" class="close" ng-click="cancelItemDetail()">&times;</button>
  <h3>New Item</h3>

  <button ng-click="cancelItemDetail()" class='btn btn-danger'>Cancel</button>
</div>

这是脚本:

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope) {

  $scope.createItemVisible = false;

  $scope.createItem = function() {
    $scope.createItemVisible = true;
  };

});

myApp.controller('ItemDetailCtrl', function($scope) {

  $scope.cancelItemDetail = function() {
    $scope.$parent.createItemVisible = false;
  }

});

Answer 1

根据 Ilan Frumer 的评论，我能够更好地理解您不应该在作用域上使用基元。我创建了一个命名空间来保存我的变量。

var main = {
  createItemVisible : false
};

然后我向范围注册了这个命名空间。

$scope.main = main;

然后我相应地更新了所有引用资料。

这是更新后的 plnkr http://plnkr.co/edit/1tNpTzEBnTRHgvx6o0dc?p=preview