如何在 Zeppelin 上从 JavaScript 设置角度变量值答案

【问题标题】：How to set angular variable value from JavaScript on Zeppelin如何在 Zeppelin 上从 JavaScript 设置角度变量值
【发布时间】：2017-05-06 02:29:10
【问题描述】：

我在 zeppelin 上使用 D3 进行可视化，我需要将 Scala 变量与 javascript 变量链接起来。

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

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

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

z.angular("aux")

我希望得到以下结果：

在点击“点击我”按钮之前，我希望： aux = “原始值”。
单击“点击我”按钮后，我希望： aux = "If"
点击两次“点击我”按钮后，我希望： aux = “Else”

如何将javascript“aux”变量与angular的“aux”链接？

【问题讨论】：

再解释一下，aux 变量是在哪里定义的？在Scope?
我不知道我必须在哪里定义它。我需要从 Angular 中的 Javascript 获取信息。之后我想在其他段落中定义一个角度控制器来响应aux 的变化。
查看stackoverflow.com/questions/38335170/…
谢谢@RockieYang，我终于可以解决我的问题了。

标签： javascript angularjs apache-zeppelin

【解决方案1】：

我终于找到了方法：

第 1) 和 3) 段与所讨论的内容相同。进入 pragraph 2) 通过在 angularjs 输入字段中写入并使用 z.angularBind(..) 方法对更改做出反应来修改 aux 变量。它允许将辅助变量与另一个值绑定。 z.angularBind(..) 方法的第三个参数是第 3 段的标识符。

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

【讨论】：