Thanks for the explanations.
First, I changed the last line:
* scope.selectedNode = d.name <http://d.name/>;*
to
*scope.$apply(function(){*
* scope.selectedNode = d.name <http://d.name>;*
* })*
Because in the former one, there is a delay before the value change on the
page.
With the above change,
println(z.angular("selectedNode")): prints correct value
println(selectedNode): Wrong, initial value.
Also, watch works only first change, but does not work on other changes.
On Tue, Aug 18, 2015 at 5:52 PM, Corneau Damien <cornead...@gmail.com>
wrote:
> The difference is the scope of variables.
> The angularBinded values must me accessible at notebook level to be used
> by any of its paragraph.
>
> In your case you were setting the scope value in a paragraph dom node
> scope level.
>
> Which means its not accesible by other paragraphs. Furthermore we only
> send the compiledScope variable to the backend (can't send all the app
> scope)
> On Aug 18, 2015 11:41 PM, "hasan türken" <turk...@gmail.com> wrote:
>
>> I could not understand why it is so hard. I just thought it was something
>> very similar what is shown in this video:
>>
>> https://www.youtube.com/watch?v=QdjZyOkcG_w (code is here:
>> https://github.com/apache/incubator-zeppelin/pull/27)
>>
>> Where, there is a dropdown list whose value is binded to an Angular/Scala
>> variable. And any change on this variable (in front-end), can be detected
>> from zeppelin side (back-end).
>> I am just trying to do something similar, but I just need to access the
>> variable within a js function.
>> Why is it so different and seems impossible without playing with the
>> source of zeppelin?
>>
>> Thanks.
>>
>> On Tue, Aug 18, 2015 at 5:33 PM, DuyHai Doan <doanduy...@gmail.com>
>> wrote:
>>
>>> Personnally I tried to modify the source code of the Zeppelin
>>> notebook.controller.js to add a new method "pushAngular" to trigger update
>>> from front-end to back-end. But it requires some knowledge of AngularJS.
>>>
>>> On Tue, Aug 18, 2015 at 3:39 PM, hasan türken <turk...@gmail.com> wrote:
>>>
>>>> Thanks for quick response.
>>>> Checked the lines you shared, but I am new to Front-end development and
>>>> could not imagine how and where to access and play with the compileScope (I
>>>> think it is compiledScope, as I saw in the code you linked).
>>>> Should I try to access it within my dblclick function? Or from scala
>>>> side ?
>>>>
>>>> On Tue, Aug 18, 2015 at 4:18 PM, DuyHai Doan <doanduy...@gmail.com>
>>>> wrote:
>>>>
>>>>> This is very tricky. I had a look into the source code of the Angular
>>>>> object binding system and it appears that there is an isolated compile
>>>>> scope:
>>>>>
>>>>> Definition:
>>>>> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/src/app/app.controller.js#L17
>>>>>
>>>>> Usage:
>>>>> https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-web/src/app/notebook/notebook.controller.js#L466-L469
>>>>>
>>>>> You need to play with the compileScope to trigger any update from the
>>>>> front-end to the back-end
>>>>>
>>>>> On Tue, Aug 18, 2015 at 3:02 PM, hasan türken <turk...@gmail.com>
>>>>> wrote:
>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> First of thanks for the awesome Angular interpreter, which seems to
>>>>>> have a big potential.
>>>>>> I am trying to detect a change on an Angular variable using the
>>>>>> Angular interpreter. I am changing the Angular variable within a
>>>>>> javascript
>>>>>> function, see the result but binded scala object does not change.
>>>>>>
>>>>>> I am binding with:
>>>>>>
>>>>>> *var selectedNode = "none"*
>>>>>> *def plotter = {*
>>>>>> * ...*
>>>>>>
>>>>>> * z.angularBind("selectedNode", selectedNode)*
>>>>>> * z.angularUnwatch("selectedNode")*
>>>>>> * z.angularWatch("selectedNode", (before:Object, after:Object) =>
>>>>>> {*
>>>>>> * z.run(2)*
>>>>>> * })*
>>>>>> * ...*
>>>>>> *}*
>>>>>>
>>>>>> Then:
>>>>>>
>>>>>> * %angular*
>>>>>> *<div id="tree_1">*
>>>>>> * <h2>Selected Node: {{selectedNode}}</h2>*
>>>>>> * </div>*
>>>>>>
>>>>>> I can see "Selected Node: none"
>>>>>>
>>>>>> I have a node and I set a dblclick function on it:
>>>>>>
>>>>>> * function dblclick(d) {*
>>>>>> * var scope = angular.element($("#tree_1")).scope();*
>>>>>> * scope.$apply(function(){*
>>>>>> * scope.selectedNode = d.name <http://d.name>;*
>>>>>> * console.log(d.name <http://d.name>);*
>>>>>> * })*
>>>>>>
>>>>>> When I double click a node, it successfully sets the selectedNode
>>>>>> variable, since I can see the name as:
>>>>>>
>>>>>> Selected Node: some-node-name
>>>>>>
>>>>>> But the problem is, it is not reflected to scala side, i.e. when I
>>>>>> run:
>>>>>>
>>>>>> * println(selectedNode)*
>>>>>>
>>>>>> I can not get the updated name also can not detect any change even I
>>>>>> set with angularWatch.
>>>>>>
>>>>>> Thanks in advance,
>>>>>> Hasan
>>>>>>
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>>
