从NG-Include Controller中修改主控制器$范围

Question

我在我的页面中包含其控制器的标题视图，

<div ng-include="'header.html'" ></div>

标题包括一个操作调用，例如保存，更新...我想要在用户单击标题操作中的主控制器时。

，但我无法访问和修改来自NG包含页面的主污点$范围

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
  $scope.value = 'first value';
});
app.controller('HeaderCtrl', function($scope) {
  $scope.header = 'from header';
  $scope.update = function(){
    $scope.$parent.value = 'new value';
  }
});

我已经创建了一个plunker演示来说明问题

http://plnkr.co/edit/xemd2nxudb6g8cecrnfu?p=preview

Answer 1

从子范围内的父范围更新一个值时，我通常会使用其中之一：

1. 将对象传递给孩子并更新对象内部的礼节
2. 将功能传递到子范围并调用此功能以更新值。

在您的示例中，如果您使用选项(1(，则是这样：

app.js文件

app.controller('MainCtrl', function($scope) {
  $scope.value = {
    data: 'first value'
  };
});
app.controller('HeaderCtrl', function($scope) {
  $scope.header = 'from header';
  $scope.update = function(){
    $scope.$parent.value.data = 'new value';
  }
});

不使用ng-include，但是您可以查看此示例将功能传递到组件以更新数据

为了进一步轻描淡写AngularJS中的示波器，您可以阅读范围原型/原型继承的细微差别是什么？

Answer 2

在您的特定情况下，您可以使用：

$scope.$parent.$parent.value = 'new value';

检查修改后的plunkr。

，但真正的解决方案是为每个控制器使用指定的属性，或者更好地使用控制器作为语法。