从 ng-include 控制器修改主控制器 $scope

Question

我有一个 header 视图，他的控制器包含在我的页面中：

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

header 包括一个操作调用，如保存、更新...我希望当用户单击 header 操作时更新我的主控制器。

但我无法从 ng-included 页面

访问和修改主控制器 $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, or better yet use the 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 控制器修改主控制器 $scope

modify main controller $scope from ng-include controller

javascript

scope

prototype

angularjs

angularjs-ng-include