在AngularJS中,子视图无法直接更新父视图数据是因为它们使用了不同的作用域。要解决这个问题,可以使用事件广播机制来更新父视图数据。
以下是一个示例代码,演示了如何在控制器之外更新父视图数据:
HTML文件:
父视图
父视图数据:{{parentData}}
子视图
子视图数据:{{childData}}
JavaScript文件:
// 创建AngularJS应用程序
var app = angular.module('myApp', []);
// 父视图控制器
app.controller('ParentController', function($scope) {
$scope.parentData = "父视图初始数据";
// 更新父视图数据的方法
$scope.updateParentData = function() {
$scope.parentData = "更新后的父视图数据";
}
// 监听子视图广播的事件
$scope.$on('childDataUpdated', function(event, data) {
$scope.parentData = data;
});
});
// 子视图控制器
app.controller('ChildController', function($scope) {
$scope.childData = "子视图初始数据";
// 更新子视图数据的方法
$scope.updateChildData = function() {
$scope.childData = "更新后的子视图数据";
// 广播事件,将数据传递给父视图
$scope.$emit('childDataUpdated', $scope.childData);
}
});
在上面的代码中,父视图控制器(ParentController
)和子视图控制器(ChildController
)分别定义了parentData
和childData
变量,分别用于存储父视图和子视图的数据。
在父视图控制器中,定义了updateParentData
方法来更新父视图数据。同时,使用$on
函数监听子视图广播的childDataUpdated
事件,并在事件触发时更新父视图数据。
在子视图控制器中,定义了updateChildData
方法来更新子视图数据。在更新子视图数据后,使用$emit
函数广播childDataUpdated
事件,并将子视图数据传递给父视图。
这样,当点击子视图中的“更新子视图数据”按钮时,子视图数据将被更新,并通过广播事件传递给父视图,从而更新父视图数据。