把数据从angularjs传递到原生js中的解决方案

小灰灰 2021-11-29 16:42 185阅读 0赞

### angularjs传递数据到原生js ###

angularjs的MVC分层思想很类似java后端的MVC，应该也有很多人和我一样java出身写前端的时候喜欢用angularjs，但经常会遇到一个问题：angularjs的内存是独立的，利用angularjs从后端获取到的数据无法传递到一些基于原生js的插件中，例如echarts和layui，利用angullarjs指令集成它们的方案我查询过很多，也没弄太懂，如果有新手和我一样遇到这样的问题，可以看看这个解决方案。

本方案的流程为：  
1.通过angular.element()方法获取一个dom对象，将要传递的对象通过JSON.stringify()方法转换成字符串注入其中（可以使用隐藏域）  
2.监听该dom对象的值，当该值变化时，将其取出，通过JSON.parse()方法解析为对象，然后再调用插件中的方法注入到页面

**下面是一个小案例**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>angular-echarts</title>
    	</head>
    	<script src="jquery-3.4.1.min.js"></script>
    	<script src="angular.min.js"></script>
    
    	<body ng-app="myapp" ng-controller="myController">
    		angular的值:<input ng-model="data" type="number" />
    		<hr>
    		接收angular数据:<input id="yu" value="123456" /><br>
    		类型:<input id="lx" /><br>
    		数据:<input id="sj" />
    	</body>
    	<script> $("#yu").on('change', function() { var json = JSON.parse($("#yu").val()); $("#lx").val(json.lx); $("#sj").val(json.sj); }) </script>
    	<script> var app = angular.module('myapp', []); app.service('myService', function($http) { }); app.controller('myController', function($scope, $interval, myService) { $scope.data = 0; $scope.json = { lx: "danshu", sj: 0, } $scope.$watch('data', function(newValue, oldValue) { if (newValue % 2 == 0) { $scope.json = { lx: "双数", sj: newValue + 10, } } else { $scope.json = { lx: "单数", sj: newValue + 10, } } var yu = angular.element("#yu")[0] yu.value = JSON.stringify($scope.json); $(yu).trigger('change');//通过js改变元素内容时，js的监听方法不能识别，所以主动调用一次触发监听方法 }); }); </script>
    </html>

**案例界面**  
![在这里插入图片描述][20190722145510763.png]  
我在angularjs中监听input的值  
![在这里插入图片描述][20190722145546906.png]  
当该值变化时，改变json对象，并把它转化为字符串，通过angular.element()注入到页面上的input中  
![在这里插入图片描述][20190722145745909.png]  
然后在js的监听方法中解析该字符串，将解析后得到的数据注入到页面上  
![在这里插入图片描述][20190722150052792.png]

[20190722145510763.png]: /images/20211129/0d9bc4d7cac64d658374452f6021a087.png
[20190722145546906.png]: /images/20211129/bac858edf8d7452fa0db6f81bb22c438.png
[20190722145745909.png]: /images/20211129/05d0c1dee09242278580ff1459f97fd4.png
[20190722150052792.png]: /images/20211129/e1ffbb27883a407cbfe30aa3656d43e0.png