• ZH奶酪:JavaScript调用AngularJS的函数/$scope/变量


    使用背景:

    需要在其他JavaScript文件中调用AngularJS内部方法或改变$scope变量,同时还要保持双向数据绑定;

    首先获取AngularJS application:

    方法一:通过controller来获取app

    var appElement = document.querySelector('[ng-controller=mainController]');

    然后在获取$scope变量:

    var $scope = angular.element(appElement).scope(); 

    如果改变了其中的变量之后,需要在页面表现出来,还需要调用apply()方法:

    $scope.$apply();

    方法二:通过DOM操作获取app

     1 //通过DOM操作获取app对象
     2 var element = angular.element($document.getElementById("app"));
     3 //得到app对象,可以获取app的controller
     4 var controller = element.controller();
     5 //得到app对象,可以获取app的$scope
     6 var scope = element.scope();
     7 //调用$scope中的方法
     8 scope.sub1();
     9 //调用方法后,可以重新绑定,在页面同步(可选)
    10 scope.$apply();
    11 //调用字段
    12 scope.field1;

    几个相关函数:

    获取当前元素的$socpe:     angular.element(domElement).scope() to get the current scope for the element
    获取当前app的injector:   angular.element(domElement).injector() to get the current app injector
    获取当前元素的controller:angular.element(domElement).controller() to get a hold of the ng-controller instance.

    参考文章:

    http://segmentfault.com/a/1190000000747708

    http://longqiang.name/2014/12/13/%E5%A4%96%E9%83%A8js%E8%B0%83%E7%94%A8angularjs%E5%86%85%E9%83%A8%E6%96%B9%E6%B3%95/

  • 相关阅读:
    数学杂谈 #22
    Windows 下查看端口占用情况
    [转] VUE 的常用指令2
    [转] VUE 的常用指令
    26种sourcemap看花了眼?别急,理解这几个全弄懂
    [转] webpack 中的 loader
    [转] VUE 的常用指令3
    [转]VUE 之 Webpack 打包构建
    [转]VUE devTools 安装方法
    [转] webpack devtool 配置之 Source Map
  • 原文地址:https://www.cnblogs.com/CheeseZH/p/4515638.html
Copyright © 2020-2023  润新知