Question

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

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

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

但我无法从包含ng的页面访问和修改主控制器$ scope

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

在您的具体情况下，您可以使用：

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

检查Modified plunkr。

但真正的解决方案是使用designated property for each controller，或者更好地使用controller as语法。

Answer 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，但您可以查看this example passing function to a component to update data

为了进一步低估AngularJS中的范围，您可以阅读What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

从ng-include controller

2 个答案: