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

Question

在 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 名称。

我没有看到按钮或任何可以“点击”的东西。

Answer 1

在 Angular 解释器中。我们可以

• 在 html 内容中使用

  {{name}}

• 绑定(bind)

  ng-model='name'

• 使用或设置 ng-click 或其他 Angular 指令。

  ng-click="name='Rockie'"

Modify scope variable outside of angular's controller is not a good practise according to many SOs. I also have not make it work in Zeppelin. There is a normal js fiddle example though.

以及 Spark 解释器。我们可以

• 绑定(bind)

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

• 解除绑定(bind)

  z.angularUnbind("name")

• 获取值时，需要先绑定(bind)变量，否则会得到null。

  z.angular("name")

• 观察变量

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

在 Angular 绑定(bind)旁边。 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")))