You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@zeppelin.apache.org by 江之源 <ji...@liulishuo.com> on 2015/08/27 05:44:51 UTC
Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
I have a request that i ergodic my one directive and store my sub-directive
name in an Array[String] by Scala. Then i use z.angularBind("list",
fileList) to bind the sub-directive names to "list" , i give it to the
%angular paragraph to show the names, and it's successful. But when i wanna
to add ng-click to every button to show every sub-directive and bind this
name which i selected to my next scala paragraph, i failed. i can't find a
way to bind my need variable.
Can anyone helps me,below is my simple codes :
%spark
import java.io.File
val rootDir = new File("/home/pipeline/autoScorerLLS")
val fileList = rootDir.listFiles.map(_.toString.split("/").last)
z.angularBind("list",fileList)
%angular
<div ng-repeat="n in list track by $index">
<div class="btn btn-success" >{{n}}</div>
</div>
you can modify the FIle path to try.
and Right now i tried javascript codes to finish the sub-directive display
function. But i still have no idea to bind the selected name to scala,
below is the codes:
%spark
import java.io.File
val rootDir = new File("/home/pipeline/autoScorerLLS")
val fileList = rootDir.listFiles.map(_.toString.split("/").last)
z.angularBind("list",fileList)
%angular
<div ng-repeat="n in list track by $index">
<div class="btn btn-success" onClick="myAlert.call(this)">{{n}}</div>
</div>
<div id="targetDOM">
</div>
<script>
window.myAlert = function() {
document.getElementById('targetDOM').innerHTML = this.innerHTML;
}
</script>
Thanks everyone!
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by 江之源 <ji...@liulishuo.com>.
I find another way , LOL~~.I downloaded zeppelin about 2 month ago, maybe
the version is 0.5.0 not very sure. And it still failed, i just tried to
use <select ng-options>to bind the data compromisely pasted blow, looks not
very hacky but maybe can deliver the data. And i also treat the angular in
zeppelin with love and hate....😅
And i think angularjs framework has a high degree of dependence, which
makes me a litle confused.
[image: Inline image 1]
On Thu, Aug 27, 2015 at 4:38 PM, Corneau Damien <co...@gmail.com>
wrote:
> Which Zeppelin version are you using?
> I am using the master branch and have no problem
>
> On Thu, Aug 27, 2015 at 5:34 PM, 江之源 <ji...@liulishuo.com> wrote:
>
>> Sorry to bother you again, i check the console log but it maybe enters
>> function failed.Is it related to the zeppelin version. i will try again
>> anyway thank you so much
>> [image: Inline image 1]
>>
>> On Thu, Aug 27, 2015 at 4:11 PM, Corneau Damien <co...@gmail.com>
>> wrote:
>>
>>> Your code works for me, I can see the buttons.
>>> Try to re-run it again, and if nothing appears, please checkout the
>>> console logs on your web browser dev tools
>>>
>>> On Thu, Aug 27, 2015 at 5:06 PM, 江之源 <ji...@liulishuo.com> wrote:
>>>
>>>> I create a new notebook and type the codes in your picture , but it
>>>> has no reflection without the html buttons, I checked the codes many times.
>>>> and i paste the picture. i doubt is this a correct way to load a controller
>>>> i notice the zeppelin notebook entrance is like this below. I will also
>>>> pasted the codes, would you please copy the codes to your notebook to check
>>>> whether it works.
>>>> [image: Inline image 1]
>>>>
>>>> var myList = Array("HelloWorld1","HelloWorld2","HelloWorld3" )
>>>> z.angularBind("list",myList)
>>>>
>>>> %angular
>>>> <script>
>>>>
>>>> angular.module('zeppelinWebApp').controller("myCustomController",myCustomController);
>>>> myCustomController.$inject = ["$scope", "$rootScope"];
>>>> function myCustomController($scope,$rootScope) {
>>>> this.bindedValues = $rootScope.compiledScope;
>>>> };
>>>> </script>
>>>>
>>>> <div ng-controller="myCustomController as custom">
>>>> <div ng-repeat="n in list">
>>>> <div style="margin-top:5px;"
>>>> ng-click="custom.bindedValues.selectedBtn=n" class="btn
>>>> btn-success">{{n}}</div>
>>>> </div>
>>>> </div>
>>>>
>>>> On Thu, Aug 27, 2015 at 3:15 PM, Corneau Damien <co...@gmail.com>
>>>> wrote:
>>>>
>>>>> This is due to some limitations we currently have (angular Display is
>>>>> currently in beta).
>>>>> So not everything in AngularJS is easy to do.
>>>>> The problem you have is that ng-repeat creates a sub scope in
>>>>> angularJS.
>>>>> Therefore the ng-click function would modify it in its sub scope
>>>>> instead of the $rootScope.compiledScope that we use for binding.
>>>>>
>>>>> Here is how I could bypass those limitations (Introducing a controller)
>>>>> While this currently work, this kind of hack might disappear in a near
>>>>> future for a cleaner solution.
>>>>>
>>>>> [image: Inline image 1]
>>>>>
>>>>> On Thu, Aug 27, 2015 at 2:11 PM, 江之源 <ji...@liulishuo.com>
>>>>> wrote:
>>>>>
>>>>>> [image: Inline image 1]
>>>>>> once i click on the button, the variable in the button which i
>>>>>> clicked will display. And i wanna bind the selected content to deliver to
>>>>>> my next paragraph by the method val path = z.angular("selected")
>>>>>>
>>>>>> On Thu, Aug 27, 2015 at 12:14 PM, Corneau Damien <
>>>>>> corneadoug@gmail.com> wrote:
>>>>>>
>>>>>>> Hi,
>>>>>>>
>>>>>>> It's not easy to understand
>>>>>>> Could you provide an example of the data?
>>>>>>>
>>>>>>> For what I understand, you want to show the list of string that you
>>>>>>> got from the file, and have a button next to it like this:
>>>>>>>
>>>>>>> String 1 [button1]
>>>>>>> String 2 [button2]
>>>>>>> ....
>>>>>>>
>>>>>>> However I'm not sure of what you want to do once you click on that
>>>>>>> button?
>>>>>>>
>>>>>>>
>>>>>>> On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com>
>>>>>>> wrote:
>>>>>>>
>>>>>>>> I have a request that i ergodic my one directive and store my
>>>>>>>> sub-directive name in an Array[String] by Scala. Then i use
>>>>>>>> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
>>>>>>>> i give it to the %angular paragraph to show the names, and it's successful.
>>>>>>>> But when i wanna to add ng-click to every button to show every
>>>>>>>> sub-directive and bind this name which i selected to my next scala
>>>>>>>> paragraph, i failed. i can't find a way to bind my need variable.
>>>>>>>> Can anyone helps me,below is my simple codes :
>>>>>>>>
>>>>>>>> %spark
>>>>>>>> import java.io.File
>>>>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>>>>> z.angularBind("list",fileList)
>>>>>>>> %angular
>>>>>>>> <div ng-repeat="n in list track by $index">
>>>>>>>> <div class="btn btn-success" >{{n}}</div>
>>>>>>>> </div>
>>>>>>>>
>>>>>>>> you can modify the FIle path to try.
>>>>>>>> and Right now i tried javascript codes to finish the sub-directive
>>>>>>>> display function. But i still have no idea to bind the selected name to
>>>>>>>> scala, below is the codes:
>>>>>>>>
>>>>>>>> %spark
>>>>>>>> import java.io.File
>>>>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>>>>> z.angularBind("list",fileList)
>>>>>>>>
>>>>>>>> %angular
>>>>>>>> <div ng-repeat="n in list track by $index">
>>>>>>>> <div class="btn btn-success"
>>>>>>>> onClick="myAlert.call(this)">{{n}}</div>
>>>>>>>> </div>
>>>>>>>> <div id="targetDOM">
>>>>>>>> </div>
>>>>>>>>
>>>>>>>> <script>
>>>>>>>> window.myAlert = function() {
>>>>>>>> document.getElementById('targetDOM').innerHTML =
>>>>>>>> this.innerHTML;
>>>>>>>> }
>>>>>>>> </script>
>>>>>>>>
>>>>>>>> Thanks everyone!
>>>>>>>>
>>>>>>>>
>>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>>
>
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by Corneau Damien <co...@gmail.com>.
Which Zeppelin version are you using?
I am using the master branch and have no problem
On Thu, Aug 27, 2015 at 5:34 PM, 江之源 <ji...@liulishuo.com> wrote:
> Sorry to bother you again, i check the console log but it maybe enters
> function failed.Is it related to the zeppelin version. i will try again
> anyway thank you so much
> [image: Inline image 1]
>
> On Thu, Aug 27, 2015 at 4:11 PM, Corneau Damien <co...@gmail.com>
> wrote:
>
>> Your code works for me, I can see the buttons.
>> Try to re-run it again, and if nothing appears, please checkout the
>> console logs on your web browser dev tools
>>
>> On Thu, Aug 27, 2015 at 5:06 PM, 江之源 <ji...@liulishuo.com> wrote:
>>
>>> I create a new notebook and type the codes in your picture , but it has
>>> no reflection without the html buttons, I checked the codes many times. and
>>> i paste the picture. i doubt is this a correct way to load a controller i
>>> notice the zeppelin notebook entrance is like this below. I will also
>>> pasted the codes, would you please copy the codes to your notebook to check
>>> whether it works.
>>> [image: Inline image 1]
>>>
>>> var myList = Array("HelloWorld1","HelloWorld2","HelloWorld3" )
>>> z.angularBind("list",myList)
>>>
>>> %angular
>>> <script>
>>>
>>> angular.module('zeppelinWebApp').controller("myCustomController",myCustomController);
>>> myCustomController.$inject = ["$scope", "$rootScope"];
>>> function myCustomController($scope,$rootScope) {
>>> this.bindedValues = $rootScope.compiledScope;
>>> };
>>> </script>
>>>
>>> <div ng-controller="myCustomController as custom">
>>> <div ng-repeat="n in list">
>>> <div style="margin-top:5px;"
>>> ng-click="custom.bindedValues.selectedBtn=n" class="btn
>>> btn-success">{{n}}</div>
>>> </div>
>>> </div>
>>>
>>> On Thu, Aug 27, 2015 at 3:15 PM, Corneau Damien <co...@gmail.com>
>>> wrote:
>>>
>>>> This is due to some limitations we currently have (angular Display is
>>>> currently in beta).
>>>> So not everything in AngularJS is easy to do.
>>>> The problem you have is that ng-repeat creates a sub scope in angularJS.
>>>> Therefore the ng-click function would modify it in its sub scope
>>>> instead of the $rootScope.compiledScope that we use for binding.
>>>>
>>>> Here is how I could bypass those limitations (Introducing a controller)
>>>> While this currently work, this kind of hack might disappear in a near
>>>> future for a cleaner solution.
>>>>
>>>> [image: Inline image 1]
>>>>
>>>> On Thu, Aug 27, 2015 at 2:11 PM, 江之源 <ji...@liulishuo.com>
>>>> wrote:
>>>>
>>>>> [image: Inline image 1]
>>>>> once i click on the button, the variable in the button which i clicked
>>>>> will display. And i wanna bind the selected content to deliver to my next
>>>>> paragraph by the method val path = z.angular("selected")
>>>>>
>>>>> On Thu, Aug 27, 2015 at 12:14 PM, Corneau Damien <corneadoug@gmail.com
>>>>> > wrote:
>>>>>
>>>>>> Hi,
>>>>>>
>>>>>> It's not easy to understand
>>>>>> Could you provide an example of the data?
>>>>>>
>>>>>> For what I understand, you want to show the list of string that you
>>>>>> got from the file, and have a button next to it like this:
>>>>>>
>>>>>> String 1 [button1]
>>>>>> String 2 [button2]
>>>>>> ....
>>>>>>
>>>>>> However I'm not sure of what you want to do once you click on that
>>>>>> button?
>>>>>>
>>>>>>
>>>>>> On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com>
>>>>>> wrote:
>>>>>>
>>>>>>> I have a request that i ergodic my one directive and store my
>>>>>>> sub-directive name in an Array[String] by Scala. Then i use
>>>>>>> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
>>>>>>> i give it to the %angular paragraph to show the names, and it's successful.
>>>>>>> But when i wanna to add ng-click to every button to show every
>>>>>>> sub-directive and bind this name which i selected to my next scala
>>>>>>> paragraph, i failed. i can't find a way to bind my need variable.
>>>>>>> Can anyone helps me,below is my simple codes :
>>>>>>>
>>>>>>> %spark
>>>>>>> import java.io.File
>>>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>>>> z.angularBind("list",fileList)
>>>>>>> %angular
>>>>>>> <div ng-repeat="n in list track by $index">
>>>>>>> <div class="btn btn-success" >{{n}}</div>
>>>>>>> </div>
>>>>>>>
>>>>>>> you can modify the FIle path to try.
>>>>>>> and Right now i tried javascript codes to finish the sub-directive
>>>>>>> display function. But i still have no idea to bind the selected name to
>>>>>>> scala, below is the codes:
>>>>>>>
>>>>>>> %spark
>>>>>>> import java.io.File
>>>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>>>> z.angularBind("list",fileList)
>>>>>>>
>>>>>>> %angular
>>>>>>> <div ng-repeat="n in list track by $index">
>>>>>>> <div class="btn btn-success"
>>>>>>> onClick="myAlert.call(this)">{{n}}</div>
>>>>>>> </div>
>>>>>>> <div id="targetDOM">
>>>>>>> </div>
>>>>>>>
>>>>>>> <script>
>>>>>>> window.myAlert = function() {
>>>>>>> document.getElementById('targetDOM').innerHTML =
>>>>>>> this.innerHTML;
>>>>>>> }
>>>>>>> </script>
>>>>>>>
>>>>>>> Thanks everyone!
>>>>>>>
>>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>>
>
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by 江之源 <ji...@liulishuo.com>.
Sorry to bother you again, i check the console log but it maybe enters
function failed.Is it related to the zeppelin version. i will try again
anyway thank you so much
[image: Inline image 1]
On Thu, Aug 27, 2015 at 4:11 PM, Corneau Damien <co...@gmail.com>
wrote:
> Your code works for me, I can see the buttons.
> Try to re-run it again, and if nothing appears, please checkout the
> console logs on your web browser dev tools
>
> On Thu, Aug 27, 2015 at 5:06 PM, 江之源 <ji...@liulishuo.com> wrote:
>
>> I create a new notebook and type the codes in your picture , but it has
>> no reflection without the html buttons, I checked the codes many times. and
>> i paste the picture. i doubt is this a correct way to load a controller i
>> notice the zeppelin notebook entrance is like this below. I will also
>> pasted the codes, would you please copy the codes to your notebook to check
>> whether it works.
>> [image: Inline image 1]
>>
>> var myList = Array("HelloWorld1","HelloWorld2","HelloWorld3" )
>> z.angularBind("list",myList)
>>
>> %angular
>> <script>
>>
>> angular.module('zeppelinWebApp').controller("myCustomController",myCustomController);
>> myCustomController.$inject = ["$scope", "$rootScope"];
>> function myCustomController($scope,$rootScope) {
>> this.bindedValues = $rootScope.compiledScope;
>> };
>> </script>
>>
>> <div ng-controller="myCustomController as custom">
>> <div ng-repeat="n in list">
>> <div style="margin-top:5px;"
>> ng-click="custom.bindedValues.selectedBtn=n" class="btn
>> btn-success">{{n}}</div>
>> </div>
>> </div>
>>
>> On Thu, Aug 27, 2015 at 3:15 PM, Corneau Damien <co...@gmail.com>
>> wrote:
>>
>>> This is due to some limitations we currently have (angular Display is
>>> currently in beta).
>>> So not everything in AngularJS is easy to do.
>>> The problem you have is that ng-repeat creates a sub scope in angularJS.
>>> Therefore the ng-click function would modify it in its sub scope instead
>>> of the $rootScope.compiledScope that we use for binding.
>>>
>>> Here is how I could bypass those limitations (Introducing a controller)
>>> While this currently work, this kind of hack might disappear in a near
>>> future for a cleaner solution.
>>>
>>> [image: Inline image 1]
>>>
>>> On Thu, Aug 27, 2015 at 2:11 PM, 江之源 <ji...@liulishuo.com> wrote:
>>>
>>>> [image: Inline image 1]
>>>> once i click on the button, the variable in the button which i clicked
>>>> will display. And i wanna bind the selected content to deliver to my next
>>>> paragraph by the method val path = z.angular("selected")
>>>>
>>>> On Thu, Aug 27, 2015 at 12:14 PM, Corneau Damien <co...@gmail.com>
>>>> wrote:
>>>>
>>>>> Hi,
>>>>>
>>>>> It's not easy to understand
>>>>> Could you provide an example of the data?
>>>>>
>>>>> For what I understand, you want to show the list of string that you
>>>>> got from the file, and have a button next to it like this:
>>>>>
>>>>> String 1 [button1]
>>>>> String 2 [button2]
>>>>> ....
>>>>>
>>>>> However I'm not sure of what you want to do once you click on that
>>>>> button?
>>>>>
>>>>>
>>>>> On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com>
>>>>> wrote:
>>>>>
>>>>>> I have a request that i ergodic my one directive and store my
>>>>>> sub-directive name in an Array[String] by Scala. Then i use
>>>>>> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
>>>>>> i give it to the %angular paragraph to show the names, and it's successful.
>>>>>> But when i wanna to add ng-click to every button to show every
>>>>>> sub-directive and bind this name which i selected to my next scala
>>>>>> paragraph, i failed. i can't find a way to bind my need variable.
>>>>>> Can anyone helps me,below is my simple codes :
>>>>>>
>>>>>> %spark
>>>>>> import java.io.File
>>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>>> z.angularBind("list",fileList)
>>>>>> %angular
>>>>>> <div ng-repeat="n in list track by $index">
>>>>>> <div class="btn btn-success" >{{n}}</div>
>>>>>> </div>
>>>>>>
>>>>>> you can modify the FIle path to try.
>>>>>> and Right now i tried javascript codes to finish the sub-directive
>>>>>> display function. But i still have no idea to bind the selected name to
>>>>>> scala, below is the codes:
>>>>>>
>>>>>> %spark
>>>>>> import java.io.File
>>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>>> z.angularBind("list",fileList)
>>>>>>
>>>>>> %angular
>>>>>> <div ng-repeat="n in list track by $index">
>>>>>> <div class="btn btn-success"
>>>>>> onClick="myAlert.call(this)">{{n}}</div>
>>>>>> </div>
>>>>>> <div id="targetDOM">
>>>>>> </div>
>>>>>>
>>>>>> <script>
>>>>>> window.myAlert = function() {
>>>>>> document.getElementById('targetDOM').innerHTML =
>>>>>> this.innerHTML;
>>>>>> }
>>>>>> </script>
>>>>>>
>>>>>> Thanks everyone!
>>>>>>
>>>>>>
>>>>>
>>>>
>>>
>>
>
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by Corneau Damien <co...@gmail.com>.
Your code works for me, I can see the buttons.
Try to re-run it again, and if nothing appears, please checkout the console
logs on your web browser dev tools
On Thu, Aug 27, 2015 at 5:06 PM, 江之源 <ji...@liulishuo.com> wrote:
> I create a new notebook and type the codes in your picture , but it has
> no reflection without the html buttons, I checked the codes many times. and
> i paste the picture. i doubt is this a correct way to load a controller i
> notice the zeppelin notebook entrance is like this below. I will also
> pasted the codes, would you please copy the codes to your notebook to check
> whether it works.
> [image: Inline image 1]
>
> var myList = Array("HelloWorld1","HelloWorld2","HelloWorld3" )
> z.angularBind("list",myList)
>
> %angular
> <script>
>
> angular.module('zeppelinWebApp').controller("myCustomController",myCustomController);
> myCustomController.$inject = ["$scope", "$rootScope"];
> function myCustomController($scope,$rootScope) {
> this.bindedValues = $rootScope.compiledScope;
> };
> </script>
>
> <div ng-controller="myCustomController as custom">
> <div ng-repeat="n in list">
> <div style="margin-top:5px;"
> ng-click="custom.bindedValues.selectedBtn=n" class="btn
> btn-success">{{n}}</div>
> </div>
> </div>
>
> On Thu, Aug 27, 2015 at 3:15 PM, Corneau Damien <co...@gmail.com>
> wrote:
>
>> This is due to some limitations we currently have (angular Display is
>> currently in beta).
>> So not everything in AngularJS is easy to do.
>> The problem you have is that ng-repeat creates a sub scope in angularJS.
>> Therefore the ng-click function would modify it in its sub scope instead
>> of the $rootScope.compiledScope that we use for binding.
>>
>> Here is how I could bypass those limitations (Introducing a controller)
>> While this currently work, this kind of hack might disappear in a near
>> future for a cleaner solution.
>>
>> [image: Inline image 1]
>>
>> On Thu, Aug 27, 2015 at 2:11 PM, 江之源 <ji...@liulishuo.com> wrote:
>>
>>> [image: Inline image 1]
>>> once i click on the button, the variable in the button which i clicked
>>> will display. And i wanna bind the selected content to deliver to my next
>>> paragraph by the method val path = z.angular("selected")
>>>
>>> On Thu, Aug 27, 2015 at 12:14 PM, Corneau Damien <co...@gmail.com>
>>> wrote:
>>>
>>>> Hi,
>>>>
>>>> It's not easy to understand
>>>> Could you provide an example of the data?
>>>>
>>>> For what I understand, you want to show the list of string that you got
>>>> from the file, and have a button next to it like this:
>>>>
>>>> String 1 [button1]
>>>> String 2 [button2]
>>>> ....
>>>>
>>>> However I'm not sure of what you want to do once you click on that
>>>> button?
>>>>
>>>>
>>>> On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com>
>>>> wrote:
>>>>
>>>>> I have a request that i ergodic my one directive and store my
>>>>> sub-directive name in an Array[String] by Scala. Then i use
>>>>> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
>>>>> i give it to the %angular paragraph to show the names, and it's successful.
>>>>> But when i wanna to add ng-click to every button to show every
>>>>> sub-directive and bind this name which i selected to my next scala
>>>>> paragraph, i failed. i can't find a way to bind my need variable.
>>>>> Can anyone helps me,below is my simple codes :
>>>>>
>>>>> %spark
>>>>> import java.io.File
>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>> z.angularBind("list",fileList)
>>>>> %angular
>>>>> <div ng-repeat="n in list track by $index">
>>>>> <div class="btn btn-success" >{{n}}</div>
>>>>> </div>
>>>>>
>>>>> you can modify the FIle path to try.
>>>>> and Right now i tried javascript codes to finish the sub-directive
>>>>> display function. But i still have no idea to bind the selected name to
>>>>> scala, below is the codes:
>>>>>
>>>>> %spark
>>>>> import java.io.File
>>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>>> z.angularBind("list",fileList)
>>>>>
>>>>> %angular
>>>>> <div ng-repeat="n in list track by $index">
>>>>> <div class="btn btn-success" onClick="myAlert.call(this)">{{n}}</div>
>>>>> </div>
>>>>> <div id="targetDOM">
>>>>> </div>
>>>>>
>>>>> <script>
>>>>> window.myAlert = function() {
>>>>> document.getElementById('targetDOM').innerHTML =
>>>>> this.innerHTML;
>>>>> }
>>>>> </script>
>>>>>
>>>>> Thanks everyone!
>>>>>
>>>>>
>>>>
>>>
>>
>
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by 江之源 <ji...@liulishuo.com>.
I create a new notebook and type the codes in your picture , but it has no
reflection without the html buttons, I checked the codes many times. and i
paste the picture. i doubt is this a correct way to load a controller i
notice the zeppelin notebook entrance is like this below. I will also
pasted the codes, would you please copy the codes to your notebook to check
whether it works.
[image: Inline image 1]
var myList = Array("HelloWorld1","HelloWorld2","HelloWorld3" )
z.angularBind("list",myList)
%angular
<script>
angular.module('zeppelinWebApp').controller("myCustomController",myCustomController);
myCustomController.$inject = ["$scope", "$rootScope"];
function myCustomController($scope,$rootScope) {
this.bindedValues = $rootScope.compiledScope;
};
</script>
<div ng-controller="myCustomController as custom">
<div ng-repeat="n in list">
<div style="margin-top:5px;"
ng-click="custom.bindedValues.selectedBtn=n" class="btn
btn-success">{{n}}</div>
</div>
</div>
On Thu, Aug 27, 2015 at 3:15 PM, Corneau Damien <co...@gmail.com>
wrote:
> This is due to some limitations we currently have (angular Display is
> currently in beta).
> So not everything in AngularJS is easy to do.
> The problem you have is that ng-repeat creates a sub scope in angularJS.
> Therefore the ng-click function would modify it in its sub scope instead
> of the $rootScope.compiledScope that we use for binding.
>
> Here is how I could bypass those limitations (Introducing a controller)
> While this currently work, this kind of hack might disappear in a near
> future for a cleaner solution.
>
> [image: Inline image 1]
>
> On Thu, Aug 27, 2015 at 2:11 PM, 江之源 <ji...@liulishuo.com> wrote:
>
>> [image: Inline image 1]
>> once i click on the button, the variable in the button which i clicked
>> will display. And i wanna bind the selected content to deliver to my next
>> paragraph by the method val path = z.angular("selected")
>>
>> On Thu, Aug 27, 2015 at 12:14 PM, Corneau Damien <co...@gmail.com>
>> wrote:
>>
>>> Hi,
>>>
>>> It's not easy to understand
>>> Could you provide an example of the data?
>>>
>>> For what I understand, you want to show the list of string that you got
>>> from the file, and have a button next to it like this:
>>>
>>> String 1 [button1]
>>> String 2 [button2]
>>> ....
>>>
>>> However I'm not sure of what you want to do once you click on that
>>> button?
>>>
>>>
>>> On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com>
>>> wrote:
>>>
>>>> I have a request that i ergodic my one directive and store my
>>>> sub-directive name in an Array[String] by Scala. Then i use
>>>> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
>>>> i give it to the %angular paragraph to show the names, and it's successful.
>>>> But when i wanna to add ng-click to every button to show every
>>>> sub-directive and bind this name which i selected to my next scala
>>>> paragraph, i failed. i can't find a way to bind my need variable.
>>>> Can anyone helps me,below is my simple codes :
>>>>
>>>> %spark
>>>> import java.io.File
>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>> z.angularBind("list",fileList)
>>>> %angular
>>>> <div ng-repeat="n in list track by $index">
>>>> <div class="btn btn-success" >{{n}}</div>
>>>> </div>
>>>>
>>>> you can modify the FIle path to try.
>>>> and Right now i tried javascript codes to finish the sub-directive
>>>> display function. But i still have no idea to bind the selected name to
>>>> scala, below is the codes:
>>>>
>>>> %spark
>>>> import java.io.File
>>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>>> z.angularBind("list",fileList)
>>>>
>>>> %angular
>>>> <div ng-repeat="n in list track by $index">
>>>> <div class="btn btn-success" onClick="myAlert.call(this)">{{n}}</div>
>>>> </div>
>>>> <div id="targetDOM">
>>>> </div>
>>>>
>>>> <script>
>>>> window.myAlert = function() {
>>>> document.getElementById('targetDOM').innerHTML = this.innerHTML;
>>>> }
>>>> </script>
>>>>
>>>> Thanks everyone!
>>>>
>>>>
>>>
>>
>
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by Corneau Damien <co...@gmail.com>.
This is due to some limitations we currently have (angular Display is
currently in beta).
So not everything in AngularJS is easy to do.
The problem you have is that ng-repeat creates a sub scope in angularJS.
Therefore the ng-click function would modify it in its sub scope instead of
the $rootScope.compiledScope that we use for binding.
Here is how I could bypass those limitations (Introducing a controller)
While this currently work, this kind of hack might disappear in a near
future for a cleaner solution.
[image: Inline image 1]
On Thu, Aug 27, 2015 at 2:11 PM, 江之源 <ji...@liulishuo.com> wrote:
> [image: Inline image 1]
> once i click on the button, the variable in the button which i clicked
> will display. And i wanna bind the selected content to deliver to my next
> paragraph by the method val path = z.angular("selected")
>
> On Thu, Aug 27, 2015 at 12:14 PM, Corneau Damien <co...@gmail.com>
> wrote:
>
>> Hi,
>>
>> It's not easy to understand
>> Could you provide an example of the data?
>>
>> For what I understand, you want to show the list of string that you got
>> from the file, and have a button next to it like this:
>>
>> String 1 [button1]
>> String 2 [button2]
>> ....
>>
>> However I'm not sure of what you want to do once you click on that button?
>>
>>
>> On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com> wrote:
>>
>>> I have a request that i ergodic my one directive and store my
>>> sub-directive name in an Array[String] by Scala. Then i use
>>> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
>>> i give it to the %angular paragraph to show the names, and it's successful.
>>> But when i wanna to add ng-click to every button to show every
>>> sub-directive and bind this name which i selected to my next scala
>>> paragraph, i failed. i can't find a way to bind my need variable.
>>> Can anyone helps me,below is my simple codes :
>>>
>>> %spark
>>> import java.io.File
>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>> z.angularBind("list",fileList)
>>> %angular
>>> <div ng-repeat="n in list track by $index">
>>> <div class="btn btn-success" >{{n}}</div>
>>> </div>
>>>
>>> you can modify the FIle path to try.
>>> and Right now i tried javascript codes to finish the sub-directive
>>> display function. But i still have no idea to bind the selected name to
>>> scala, below is the codes:
>>>
>>> %spark
>>> import java.io.File
>>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>>> z.angularBind("list",fileList)
>>>
>>> %angular
>>> <div ng-repeat="n in list track by $index">
>>> <div class="btn btn-success" onClick="myAlert.call(this)">{{n}}</div>
>>> </div>
>>> <div id="targetDOM">
>>> </div>
>>>
>>> <script>
>>> window.myAlert = function() {
>>> document.getElementById('targetDOM').innerHTML = this.innerHTML;
>>> }
>>> </script>
>>>
>>> Thanks everyone!
>>>
>>>
>>
>
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by 江之源 <ji...@liulishuo.com>.
[image: Inline image 1]
once i click on the button, the variable in the button which i clicked will
display. And i wanna bind the selected content to deliver to my next
paragraph by the method val path = z.angular("selected")
On Thu, Aug 27, 2015 at 12:14 PM, Corneau Damien <co...@gmail.com>
wrote:
> Hi,
>
> It's not easy to understand
> Could you provide an example of the data?
>
> For what I understand, you want to show the list of string that you got
> from the file, and have a button next to it like this:
>
> String 1 [button1]
> String 2 [button2]
> ....
>
> However I'm not sure of what you want to do once you click on that button?
>
>
> On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com> wrote:
>
>> I have a request that i ergodic my one directive and store my
>> sub-directive name in an Array[String] by Scala. Then i use
>> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
>> i give it to the %angular paragraph to show the names, and it's successful.
>> But when i wanna to add ng-click to every button to show every
>> sub-directive and bind this name which i selected to my next scala
>> paragraph, i failed. i can't find a way to bind my need variable.
>> Can anyone helps me,below is my simple codes :
>>
>> %spark
>> import java.io.File
>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>> z.angularBind("list",fileList)
>> %angular
>> <div ng-repeat="n in list track by $index">
>> <div class="btn btn-success" >{{n}}</div>
>> </div>
>>
>> you can modify the FIle path to try.
>> and Right now i tried javascript codes to finish the sub-directive
>> display function. But i still have no idea to bind the selected name to
>> scala, below is the codes:
>>
>> %spark
>> import java.io.File
>> val rootDir = new File("/home/pipeline/autoScorerLLS")
>> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
>> z.angularBind("list",fileList)
>>
>> %angular
>> <div ng-repeat="n in list track by $index">
>> <div class="btn btn-success" onClick="myAlert.call(this)">{{n}}</div>
>> </div>
>> <div id="targetDOM">
>> </div>
>>
>> <script>
>> window.myAlert = function() {
>> document.getElementById('targetDOM').innerHTML = this.innerHTML;
>> }
>> </script>
>>
>> Thanks everyone!
>>
>>
>
Re: Help!! A very easy question in frontend about angular, but in
Zeppelin i've no idea.
Posted by Corneau Damien <co...@gmail.com>.
Hi,
It's not easy to understand
Could you provide an example of the data?
For what I understand, you want to show the list of string that you got
from the file, and have a button next to it like this:
String 1 [button1]
String 2 [button2]
....
However I'm not sure of what you want to do once you click on that button?
On Thu, Aug 27, 2015 at 12:44 PM, 江之源 <ji...@liulishuo.com> wrote:
> I have a request that i ergodic my one directive and store my
> sub-directive name in an Array[String] by Scala. Then i use
> z.angularBind("list", fileList) to bind the sub-directive names to "list" ,
> i give it to the %angular paragraph to show the names, and it's successful.
> But when i wanna to add ng-click to every button to show every
> sub-directive and bind this name which i selected to my next scala
> paragraph, i failed. i can't find a way to bind my need variable.
> Can anyone helps me,below is my simple codes :
>
> %spark
> import java.io.File
> val rootDir = new File("/home/pipeline/autoScorerLLS")
> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
> z.angularBind("list",fileList)
> %angular
> <div ng-repeat="n in list track by $index">
> <div class="btn btn-success" >{{n}}</div>
> </div>
>
> you can modify the FIle path to try.
> and Right now i tried javascript codes to finish the sub-directive display
> function. But i still have no idea to bind the selected name to scala,
> below is the codes:
>
> %spark
> import java.io.File
> val rootDir = new File("/home/pipeline/autoScorerLLS")
> val fileList = rootDir.listFiles.map(_.toString.split("/").last)
> z.angularBind("list",fileList)
>
> %angular
> <div ng-repeat="n in list track by $index">
> <div class="btn btn-success" onClick="myAlert.call(this)">{{n}}</div>
> </div>
> <div id="targetDOM">
> </div>
>
> <script>
> window.myAlert = function() {
> document.getElementById('targetDOM').innerHTML = this.innerHTML;
> }
> </script>
>
> Thanks everyone!
>
>