AngularJS访问控制器$ scope从外部

一尘不染

AngularJS访问控制器$ scope从外部

angularjs

var theApp = angular.module('theApp', []);
var app = angular.module('theApp', ['ui.bootstrap']);
app.controller('MenuSideController', ['$scope','SnazzyService','$modal','$log', function($scope, SnazzyService, $modal, $log) {
    $scope.user.zoomlvl = '2';
}]);

我有上面的控制器，它设置了一个$scope我只能从内部访问值的控制器。

但我看到的地方，使用下面我将能够访问$scope，但是当我console.log($scope)在$scope.user.zoomlvl它不存在。

我无法弄清楚如何访问MenuSideController$ scope并使用valZoom变量更新它。

var appElement = document.querySelector('[ng-app=theApp]');
var $scope = angular.element(appElement).scope();
console.log($scope);
$scope.$apply(function() {
    $scope.user.zoomlvl = valZoom;
});

阅读 220

2020-07-04

共1个答案

一尘不染

没有看到标记，我想MenuSideController的作用域是您选择的作用域的子作用域。

虽然可以像这样遍历树（假设我们想要的作用域是第一个孩子）：

var appElement = document.querySelector('[ng-app=theApp]');
var appScope = angular.element(appElement).scope();
var controllerScope = appScope.$$childHead;
console.log(controllerScope.user);

仅选择连接了特定控制器的元素会更简单。

假设您正在使用ng-controller指令：

<body ng-controller="MenuSideController"></body>

改为：

var controllerElement = document.querySelector('body');
var controllerScope = angular.element(controllerElement).scope();
console.log(controllerScope.user);

演示： http ：
//plnkr.co/edit/WVNDG9sgYgoWaNlrNCVC？p =
preview

angular.element(document).ready(function() {

  var appElement = document.querySelector('[ng-app=theApp]');
  var appScope = angular.element(appElement).scope();

  console.log('Traversing from appScope to controllerScope:', appScope.$$childHead.user);


  var controllerElement = document.querySelector('body');
  var controllerScope = angular.element(controllerElement).scope();

  console.log('Directly from controllerScope:', controllerScope.user);


  controllerScope.$apply(function() {
    controllerScope.user.zoomlvl = '10';
  });
});

2020-07-04