如何在 Zeppelin 上设置来自 JavaScript 的 angular 变量值

Question

我正在 zeppelin 上使用 D3 进行可视化，我需要 link Scala 变量和 javascript 一个。

简单来说，我有以下三段：

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

我希望得到以下结果：

在点击"Click me"按钮之前我希望：aux = "original value".
单击"Click me"按钮后我希望：aux = "If"
两次点击"Click me"按钮后我希望：aux = "Else"

如何link javascript "aux" 变量与angular 的"aux"？

Answer 1

我终于找到了该怎么做：

第 1) 和 3) 段与所讨论的相同。进入段落 2) aux 变量通过在 angularjs 输入字段中写入并使用 z.angularBind(..) 方法对更改做出反应来修改。它允许将 aux 变量与另一个值绑定。 z.angularBind(..) 方法的第三个参数是第 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>

如何在 Zeppelin 上设置来自 JavaScript 的 angular 变量值

How to set angular variable value from JavaScript on Zeppelin

javascript

angularjs

apache-zeppelin