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

samthebest picture samthebest · Jul 12, 2016 · Viewed 11.3k times · Source

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".

Answer

Rockie Yang picture Rockie Yang · Jul 13, 2016

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")))