How to set angular variable value from JavaScript on Zeppelin

Question

I am doing a visualization using D3 on zeppelin and I need to link Scala variable with javascript one.

In a simple way, I have the following three paragraphs:

1)

z.angularUnbind("aux")
z.angularBind("aux", "original value")

2)

%angular
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

<script>
function myFunction() {
    if (document.getElementById("demo").innerHTML === ""){
       document.getElementById("demo").innerHTML = "Hello World";
       aux = "If"
    }else{
        document.getElementById("demo").innerHTML = "";
        aux = "Else"
    }
}
</script>

3)

z.angular("aux")

And I hope the following results:

Before click on "Click me" button I hope: aux = "original value".
After one click on "Click me" button I hope: aux = "If"
After two click on "Click me" button I hope: aux = "Else"

How to link javascript "aux" variable with angular's "aux"?

Explain more, where the `aux` variable is defined? In a `Scope`? — Hitmands, Dec 20 '16 at 19:21
I don't know where I have to define that. I need to get information from Javascript in Angular. After that I want to define an angular controller in other paragraph to react to `aux` changes. — fraverta, Dec 20 '16 at 19:35
Check this http://stackoverflow.com/questions/38335170/how-to-put-a-variable-into-z-zeppelincontext-in-javascript-in-zeppelin/38353337#38353337 — Rockie Yang, Dec 23 '16 at 05:36

fraverta · Accepted Answer · 2016-12-26T00:21:01.840

I finally found how to do that:

Paragraph 1) and 3) are equal to those showed in question. Into pragraph 2) aux variable is modified by write in a angularjs input field and reacting on change with z.angularBind(..) method. It allows to bind aux variable with another value. z.angularBind(..) method's third argument is the identifier of paragraph 3).

2)

%angular
<button onclick="myFunction()">Click me</button>
<input id="tb" class="hide"  ng-model="aux" ng-change="z.angularBind('aux',aux,'20161224-171923_464920272')"></input>
<p id="demo"></p>

<script>
function myFunction() {
    var element = $('#tb');
    if (document.getElementById("demo").innerHTML === ""){
       document.getElementById("demo").innerHTML = "Hello World";
       element.val("If");
    }else{
        document.getElementById("demo").innerHTML = "";
        element.val("Else");
    }
    window.setTimeout(function() {
        return element.trigger('input');
    }, 500);
}
</script>

How to set angular variable value from JavaScript on Zeppelin

1 Answers1