无法更新子控制器范围可变

Question

我是angular js的新手，无法弄清楚如何从父控制器更改子控制器作用域变量。 这是该代码段：

 var mainApp = angular.module("mainApp", []); var parentCtrl = function($rootScope, $scope, shareService, $log){ shareService.setDetails($scope.pdetails); } var mainCtrl1 = function($rootScope, $scope, shareService, $log){ $scope.msg = "Controller 1"; $scope.details = shareService.details;//shareService.details; } var mainCtrl2 = function($rootScope, $scope, shareService){ $scope.msg = "Controller 2"; $scope.details = shareService.details;//shareService.details; } parentCtrl.$inject = ["$rootScope", "$scope", "shareService", "$log"]; mainCtrl1.$inject = ["$rootScope", "$scope", "shareService", "$log"]; mainCtrl2.$inject = ["$rootScope", "$scope", "shareService", "$log"]; mainApp.controller("parentController", parentCtrl) .controller("mainController1", mainCtrl1) .controller("mainController2", mainCtrl2) .factory("shareService", function(){ var shareData = { details : "sadfgs detaisdfadsfasdf..", setDetails: function(value){ this.details = value; } }; return shareData; });

 <html> <head> <title>Angular JS Views</title> <script src='lib/angular.js'></script> <script src='js/mainApp.js'></script> <script src='js/studentController.js'></script> </head> <body ng-app = 'mainApp' ng-controller='parentController' ng-strict-di> <div ng-controller='mainController1'> 1. Msg : {{msg}}<br/> Share Details: {{details}}<br/><br/> </div> <div ng-controller='mainController2'> 2. Msg : {{msg}}<br/> Share Details: {{details}}<br/><br/> </div> <input type='text' ng-model='pdetails'/> </body> </html>

这是Plunker链接：

https://plnkr.co/edit/hJypukqMmdHSEZMVnkDO?p=preview

Answer 1

为了从父控制器更改子控制器的值，可以在$ scope上使用$ broadcast。 句法

$scope.$broadcast(event,data);

$ broadcast用于触发事件（包含数据）从当前作用域到子作用域。 在子控制器中，使用$ on接收事件（带有数据）。

这里是代码片段：

app.controller("parentCtrl",function($scope){
$scope.OnClick=function()
{
  $scope.$broadcast("senddownward",$scope.messege);
}
});
app.controller("childCtrl",function($scope){
$scope.$on("senddownward",function(event,data)
{
  $scope.messege=data;
});
});

在此示例中，我通过ng-click广播事件，您可以使用其他自定义事件，例如$ scope上的$ watch。

看到这个例子https://plnkr.co/edit/efZ9wYS2pukE0v4JsNCC?p=preview

PS，您可以将事件名称从senddownward更改为所需的任何名称

Answer 2

由于范围继承，您可以直接访问父级的范围属性：

 <div ng-controller='mainController1'>
      Share Details: {{pdetails}}
 </div>

您的示例不起作用，因为控制器仅在呈现视图之前执行一次， pdetails为空。

要监视pdetails的更改，可以在子控制器中使用$watch ：

$scope.$watch('pdetails', function(newVal) {
  $scope.details = newVal;
});

无法更新子控制器范围可变

问题描述

2 个解决方案

解决方案1
1 已采纳 2016-06-09 10:58:04

解决方案2
0 2016-06-09 10:18:29

无法更新子控制器范围可变

问题描述

2 个解决方案

解决方案1 1 已采纳 2016-06-09 10:58:04

解决方案2 0 2016-06-09 10:18:29

解决方案1
1 已采纳 2016-06-09 10:58:04

解决方案2
0 2016-06-09 10:18:29