访问视图中的AngularJS变量

Accessing AngularJS variable in view?

本文关键字:AngularJS 变量 视图 访问      更新时间:2023-09-26

考虑一个只有一个控制器的基本AngularJS应用。在控制器中,我设置了"myVariable"来保存一个值"Test"。

我在视图中给出了一个内联JavaScript代码,我需要调用一个函数samplefunction,它使用myVariable接受一个参数。

/* Controllers */
angular.module('myApp.controllers', [])
    .controller('MainCtrl', ['$scope', function($scope) {
        $scope.myVariable = "Test";
    });

在视图中,在html文件中,这是我需要做的:

<script type="text/javascript">
    var param1 = {{myVariable}};   /* <-- how to make this work?  */
    samplefunction( param1 );   
</script>

它不起作用。我只需要将myVariable值分配给param1。我还试过这样写:

...
var param1 = angular.element(document.getElementById("mainBody")).scope().myVariable
...

但这也不起作用。请注意,我不能触摸我在视图中调用的给定JS代码。

有人知道如何解决这个简单的问题吗?

从我的角度来看,你所做的事情不应该做。最接近的正确方法应该是:

视图设置一个angular应该使用的值:

<input type="text" ng-model="myVariable" id="myVar" />

和如果你想你得到你的var值从视图得到它,像:

<script type="text/javascript">  
    var param1 = document.getElementById("myVal").value;
    samplefunction( param1 );   
</script>
<<p> 在线演示/strong>

将变量传递给$window以将其暴露给JS。

$window.myVariable = $scope.myVariable;

如何将scope变量绑定到视图中元素的数据属性,然后在外部脚本标记中使用Jquery拖动它?

<script type="text/javascript">  
    var param1 = $("#someId").data("myValue");
    samplefunction( param1 );   
</script>