gpt4 book ai didi

javascript - 将 AngularJS 变量传递给 html View 中的脚本标记

转载 作者:行者123 更新时间:2023-11-30 19:59:21 26 4
gpt4 key购买 nike

问题来了。我有一个第三方脚本需要嵌入到我的 AngularJS 应用程序中,在 html 中作为 <script>标签。我需要将范围变量传递给此脚本(名称、电子邮件等)。我在这里的第一次尝试是弄清楚我是否可以在页面加载时将范围变量从 Controller 传递到脚本标记。也许有更好的方法,比如将脚本作为模板,但我不确定。我担心如果我在这个基本概念上取得成功,脚本标记将在传递变量之前呈现真实数据。

这是 HTML:

  <body>
<div ng-controller="MainCtrl">
Angular variable: {{foo}}
</div>
</body>
<script type="text/javascript">
console.log(foo); // $scope.foo?
</script>

这是 Controller :

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

app.controller('MainCtrl', function($scope) {
$scope.foo = 'bar';
})

笨蛋:https://plnkr.co/edit/5rcnqUxHRHMthHmkwVuZ?p=preview

最佳答案

如果你想将第三方脚本(jQuery 插件或其他东西)嵌入到你的 AngularJS 应用程序中,你应该为这个脚本编写包装器(简单的 directivecomponent )

你介绍的方式行不通 - 我保证

我找到了一个简单的 example为您介绍如何创建 AngularJS 指令并包装一些简单的 jquery 插件:

<html>
<head>
<title>AngularJS wrapp jquery plugin</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://raw.github.com/SamWM/jQuery-Plugins/master/numeric/jquery.numeric.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

<script type="text/javascript">
var app = angular.module('myApp', []);
app.directive('numberMask', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
$(element).numeric();
}
}
});
</script>
</head>

<body>
<div ng-app="myApp">
<div>
<input type="text" min="0" max="99" number-mask="" ng-model="message">
</div>
</div>

</body>

关于javascript - 将 AngularJS 变量传递给 html View 中的脚本标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53565536/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com