JavaScript - El botón no me abre un diálogo

   
Vista:

El botón no me abre un diálogo

Publicado por Romu (1 intervención) el 05/09/2015 13:01:14
Hola, tengo un botón que debería abrir un dialog pero no lo hace, estoy usando LumX, el código lo he copiado de la página oficial: http://ui.lumapps.com/directives/dialogs


Aquí está el código:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!-- comienzo diálogos -->
 
<button class="btn btn--m btn--black btn--flat" ng-click="opendDialog('test')" lx-ripple>Open dialog</button>
 
<lx-dialog class="dialog dialog--l" id="test" auto-close="true" onclose="closingDialog()" onscrollend="scrollEndDialog()">
    <div class="dialog__header">
        <div class="toolbar bgc-light-blue-500 pl++">
            <span class="toolbar__label tc-white fs-title">
                Lorem Ipsum
            </span>
 
            <div class="toolbar__right">
                <button class="btn btn--l btn--white btn--icon" lx-ripple ng-click="addPerson()">
                    <i class="mdi mdi-plus"></i>
                </button>
            </div>
        </div>
    </div>
 
    <div class="dialog__content">
        <lx-tabs links-tc="light" links-bgc="light-blue-500" indicator="yellow-500" no-divider="true" layout="inline">
            <lx-tab heading="Lorem Ipsum 1">
                <div class="p++">
                    <div ng-repeat="person in people">
                        {{ person.name }} - {{ person.email }} - {{ person.age }}
                    </div>
                </div>
            </lx-tab>
 
            <lx-tab heading="Lorem Ipsum 2">
                <div class="p+">
                    <p>Lorem Ipsum Content 2</p>
 
                    <lx-text-field label="Description">
                        <textarea ng-model="textFields.description"></textarea>
                    </lx-text-field>
                </div>
            </lx-tab>
 
            <lx-tab heading="Lorem Ipsum 3">
                <p class="p++">Lorem Ipsum Content 3</p>
            </lx-tab>
        </lx-tabs>
    </div>
 
    <div class="dialog__actions">
        <button class="btn btn--m btn--black btn--flat" lx-ripple lx-dialog-close>Cancel</button>
        <button class="btn btn--m btn--black btn--flat" lx-ripple>Lorem Ipsum</button>
    </div>
 
</lx-dialog>
 
<!-- fin diálogos -->


Yo todavía estoy aprendiendo por lo que no se si lo estoy haciendo bien o mal. En la página debajo del código HTML te pone este otro:

1
2
3
4
5
6
7
8
9
$scope.opendDialog = function(dialogId)
{
    LxDialogService.open(dialogId);
};
 
$scope.closingDialog = function()
{
    LxNotificationService.info('Dialog closed!');
};

Lo que hice fue copiarlo agregándole <script> </script> y ponelo debajo del código HTML de arriba.

Después ya en la página, el botón no me funciona. Aquí os dejo resumido todo en pastebin:

http://pastebin.com/7st9HkYD

Un saludo, gracias.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder