Question

我正在使用它：

window.onload=function(){
    var dom_el2 = document.querySelector('[ng-controller="myCtrl"]');
    var ng_el2 = angular.element(dom_el2);
    var ng_el_scope2 = ng_el2.scope();
    console.log(ng_el_scope2);
    var datan3 = ng_el_scope2.itson;
    console.log(datan3);
      }

它每次都显示未定义的值。我几乎尝试了所有的方法。请使用$ window建议从javascript访问角度变量的一些好方法。

Answer 1

我完全赞同@MikeMcCaughan，这是一个不好的做法！但如果你真的需要这样做，这里有一个简单的例子，一个控制器和Vanilla JS从外面访问它的变量和函数

<强>的index.html

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body>
    <div id="myController" ng-controller="myController as vm">
        My name is {{vm.fullName}}
    </div>
    <br>
    <button onclick="accessControllerScopeVar()">Get full name</button>  
    <button onclick="accessControllerScopeFunction()">Say hello !</button>   
</body>
</html>

<强>的script.js

angular.module('app', []);

angular
.module('app')
.controller('myController', ['$scope', function ($scope) {

    var vm = this;

    vm.fullName = 'Marty McFly';

    vm.getFullName = function() {
        return vm.fullName;
    }

}]);

function accessControllerScopeVar() {
    var scope = getScopeFor("myController");
    scope.$apply(function () {
        alert(scope.vm.fullName);
    });
}

function accessControllerScopeFunction() {
    var scope = getScopeFor("myController");
    scope.$apply(function () {
        alert('Hello ' + scope.vm.getFullName());
    });
}

function getScopeFor(id) {
    var el = document.getElementById(id);
    var scope = angular.element(el).scope();
    return scope;
}

以下是Plunker：https://plnkr.co/edit/7U78a6Xdlaef2qOgwucC?p=preview

<强>替代

如果您不想使用ID，请使用document.querySelector进行另一个示例：

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

我正在尝试通过JavaScript访问角度变量。但它不起作用

1 个答案: