How to put a variable into z ZeppelinContext in javascript in Zeppelin?

问题

In Scala and Python it's:

z.put("varname", variable)

But in javascript I get (in the console)

Uncaught ReferenceError: z is not defined

What I really want to do is access a javascript variable from Scala code using z.angular("varname") in Zeppelin, but I'm having no luck :(

In full need in one cell something like

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

// some magic code here!
</script>

Then in another cell

println(z.angular("myVar"))

UPDATE:

This is what I have so far, I'm completely stabbing in the dark, since I'm more of a back end / data science kind of guy. So apologies in advance for my front end hopelessness.

Cell 1:

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

Note I have no idea what to put in the second argument.

Cell 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>

Cell 3:

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

And no matter what I do I just either get null or the var name.

I don't see a button either or anything to "click".

回答1:

In Angular interpreter. we can

Use within html content

{{name}}
Bind with

ng-model='name'
Use or set with ng-click or other angular directives.

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.

And in Spark interpreter. We can

Bind with

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

z.angularUnbind("name")
Get the value with, the variable need be bind first, otherwise it will get null.

z.angular("name")
Watch a variable with

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

Beside the angular bind. The Dynamic Form is a good way to give interactive for end users

Input

z.input("number", 1).toString.toInt
Select without default value

z.select("Day", Seq(("1", "Mon"), ("2", "Tue")))
Select with default value,

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

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

回答2:

this worked for me

%angular

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

%spark2

var result = z.angular("id_selected_arr")

But I gace another issue, how to process the array... Maybe someone will answer to you and it moght help to you as well Check it here

来源：https://stackoverflow.com/questions/38335170/how-to-put-a-variable-into-z-zeppelincontext-in-javascript-in-zeppelin

标签

angularjs

scala

apache-zeppelin