从外部AngularJS访问控制器$范围

本文介绍了从外部AngularJS访问控制器$范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

  VAR该app = angular.module（'app的'，[]）;
VAR应用= angular.module（'app的'，['ui.bootstrap']）;
app.controller（'MenuSideController'，['$范围，SnazzyService'，'$模式，$日志'，函数（$范围，SnazzyService，$模式，$日志）{
    $ scope.user.zoomlvl ='2';
}]）;

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

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

我无法弄清楚如何访问 MenuSideController $范围和更新，与 valZoom 变量。

  VAR appElement = document.querySelector（'[NG-应用=该app]'）;
变量$ =范围angular.element（appElement）.scope（）;
的console.log（$范围内）;
$范围。$应用（函数（）{
    $ scope.user.zoomlvl = valZoom;
}）;

解决方案

在没有看到标记，我猜MenuSideController的范围是一个子范围，您选择的范围。

虽然可以遍历下来的树像这样（假设我们想要的范围的第一个孩子）：

  VAR appElement = document.querySelector（'[NG-应用=该app]'）;
VAR另外，AppScope = angular.element（appElement）.scope（）;
VAR controllerScope =另外，AppScope $$ childHead。
的console.log（controllerScope.user）;

这是简单的只需选择其中特定的控制器连接的元素。

假设你正在使用的 NG-控制器指令：

 ＆LT;机身NG控制器=MenuSideController＆GT;＆LT; /身体GT;

做，而不是：

  VAR controllerElement = document.querySelector（'身体'）;
变种controllerScope = angular.element（controllerElement）.scope（）;
的console.log（controllerScope.user）;

演示：

  angular.element（文件）。就绪（函数（）{  VAR appElement = document.querySelector（'[NG-应用=该app]'）;
  VAR另外，AppScope = angular.element（appElement）.scope（）;  的console.log（'从另外，AppScope运行到controllerScope：'，另外，AppScope $$ childHead.user）;
  VAR controllerElement = document.querySelector（'身体'）;
  变种controllerScope = angular.element（controllerElement）.scope（）;  的console.log（'直接从controllerScope：'，controllerScope.user）;
  controllerScope。$应用（函数（）{
    controllerScope.user.zoomlvl ='10';
  }）;
}）;

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';
}]);

I have the above controller and it sets a $scope which I can only ever access the values from inside.

But I seen somewhere that using the below I would be able to access the $scope but when I console.log($scope) the $scope.user.zoomlvl it doesn't exist.

I cannot figure out how to access the MenuSideController $scope and update that with the valZoom variable.

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

解决方案

Without seeing the markup, I guess the scope of MenuSideController is a child scope to the scope you are selecting.

While it is possible to traverse down the tree like this (assuming the scope we want is the first child):

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

It is simpler to just select the element where the specific controller is attached.

Assuming you are using the ng-controller directive:

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

Do instead:

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

Demo: 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';
  });
});

这篇关于从外部AngularJS访问控制器$范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Access

从外部AngularJS访问控制器$范围

问题描述