Question

我很难理解为什么以下代码完全停止工作。基本上当我尝试使用来自$ parent范围的ng-show隐藏和显示ng-include时，它可以正常工作。例如，在附加的plnkr中，如果您点击“Create New”然后“Cancel”，或者只是“Toggle”，则适当地设置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

从ng-include上的单独控制器设置时，$ parent变量已损坏

1 个答案: