如何在 Zeppelin 的 javascript 中将变量放入 z ZeppelinContext？

Posted 2023-03-23

【中文标题】如何在 Zeppelin 的 javascript 中将变量放入 z ZeppelinContext？

【英文标题】：How to put a variable into z ZeppelinContext in javascript in Zeppelin?

【发布时间】：2016-11-15 01:36:15

【问题描述】：

在 Scala 和 Python 中是：

z.put("varname", variable)

但在 javascript 中我得到（在控制台中）

Uncaught ReferenceError: z is not defined

我真正想做的是在 Zeppelin 中使用 z.angular("varname") 从 Scala 代码访问 javascript 变量，但我没有运气:(

在一个单元格中完全需要类似的东西

%angular
<script>
var myVar = "hello world";

// some magic code here!
</script>

然后在另一个单元格中

println(z.angular("myVar"))

更新：

这就是我到目前为止所拥有的，我完全是在黑暗中刺伤，因为我更像是一个后端/数据科学类的人。所以提前为我的前端绝望道歉。

单元格 1：

z.angularBind("myVar", "myVar")
z.angularBind("msg", "msg")

注意我不知道在第二个参数中放什么。

单元格 2：

%angular

<div ng-app>
    <div id="outer" ng-controller="MsgCtrl">
        You are msg
    </div>
    <div onclick="change()">click me</div>
</div>

<script>
var myVar = "hello world";

function MsgCtrl($scope) 

    $scope.msg = "foo";
    // also experimented with $scope.msg = myVar;


function change() 
    var scope = angular.element($("#outer")).scope();
    scope.$apply(function()
        scope.msg = 'Superhero';
    )

</script>

单元格 3：

z.angular("msg")
z.angular("myVar")

无论我做什么，我都会得到 null 或 var 名称。

我也没有看到一个按钮或任何“点击”的东西。

【参考方案1】：

在 Angular 解释器中。我们可以

在 html 内容中使用

name

绑定

ng-model='name'

通过 ng-click 或其他角度指令使用或设置。

ng-click="name='Rockie'"

根据许多 SO，在 Angular 控制器之外修改范围变量并不是一个好习惯。我也没有让它在 Zeppelin 中工作。不过有一个normal js fiddle example。

在 Spark 解释器中。我们可以

绑定

z.angularBind("name", "Knock Data")

解除绑定

z.angularUnbind("name")

取值，变量需要先绑定，否则为空。

z.angular("name")

观察变量

z.angularWatch("name", (oldValue: Object, newValue: Object) => println(s"value changed from $oldValue to $newValue" )

在角绑定旁边。 Dynamic Form 是为最终用户提供互动的好方法

输入

z.input("number", 1).toString.toInt

选择不带默认值

z.select("Day", Seq(("1", "Mon"), ("2", "Tue")))

选择默认值，

z.select("Day", "1", Seq(("1", "Mon"), ("2", "Tue")))

检查

z.checkbox("good applications", Seq(("1", "Zeppelin"), ("2", "Highcharts"), ("3", "Spark")))

【讨论】：

感谢阅读这篇文章让我学到了很多。所以我将<div ng-model='myVar'> 添加到我的%angular 单元格的末尾，但我仍然在Scala 单元格中为z.angular("myVar") 获得null :( 我也尝试使用链接中的示例，但我只是不断得到null 为z.angular("msg") :(

你首先需要 z.angularBind，然后是 ng-model。之后，您可以使用 z.angular 获取值。

谢谢，我已经更新了我的答案，以显示我到目前为止所拥有的内容。

我缺少的是如何在角度值发生变化时触发 javascript 代码。我想在循环中执行 z.angularBind("data", data) ，并在数据更改时触发我在 javascript 中的重新显示逻辑。

【参考方案2】：

这对我有用

%角度

<div id="map" style="height: 300px; width: 50%" ng-model="id_selected_arr"/>

%spark2

var result = z.angular("id_selected_arr")

但是我遇到了另一个问题，如何处理数组...也许有人会回答你，它也对你有帮助检查它here