Problema con più elementi HTML figlio che utilizzano le direttive in AngularJS

Sto utilizzando un modello per creare un menu a comparsa che mostrerà gli avvisi se ce n'è uno nuovo e funziona fino ad ora. Ma volevo aggiungere un avviso manuale, ecco perché ho pensato di aggiungere un testo di input ma Oupss, non posso scrivere sul campo di input e non so nemmeno perché. Il campo di inserimento è una sorta di Disabilitato !!!Problema con più elementi HTML figlio che utilizzano le direttive in AngularJS

mia direttiva è in questo modo:

$scope.tb = { x: 0, y: 0 }; 

module.directive('myDraggable', function ($document, $interval) { 
return { 
    restrict: 'EA', 
    replace: true, 
    //scope : true, 
    scope: { menu: '=drSrc'}, 
    link: function (scope, element, attr) { 

     var startX = 0, startY = 0, x = scope.menu.x || 0, y = scope.menu.y || 0, positionX = [], positionY = [], time = [], width, height, moveInterval; 

     element.draggable({ 
      position: 'relative', 
      cursor: 'pointer', 
      top: y + 'px', 
      left: x + 'px' 
     }); 

     element.on('mousedown', function (event) { 

      // Prevent default dragging of selected content 
      event.preventDefault(); 
      startX = event.pageX - x; 
      startY = event.pageY - y; 
      $document.on('mousemove', mousemove); 
      $document.on('mouseup', mouseup); 
      $interval.cancel(moveInterval); 
     }); 

     function mousemove(event) { 
      y = event.pageY - startY; 
      x = event.pageX - startX; 
      //calculate the borders of the document 
      width = $(document).width() - 350; 
      height = $(document).height() - 150; 
      positionX.push(x); 
      positionY.push(y); 
      time.push(Date.now()); 
     } 
    } 
} 
});

ho cercato di fare ambito vero, ma ho affrontato 2 problemi,: Non riesco a muovere più la mia comparsa (sì il mio menu a comparsa è Draggable) E Anche il testo di input non mostra il mio testo che sto scrivendo.

Ecco il mio modello di cache:

$templateCache.put('control.tpl.html', '<div class="container" my-draggable dr-src="tb"><div><div class="col-sm-1 col-md-1 sidebar"><div class="list-group" ><span href="#" class="list-group-item active" >Manage<input type="text" class="pull-right" placeholder="Type..." /></span><div ng-repeat="Alert in Alerts"><a href="#" ng-click="showLocation(Alert.id)" class="list-group-item" >Alert {{Alert.id}}</span><img src="../images/alert_icon_manage.png" class="pull-right"/> </a></div><span href="#" class="list-group-item active"></span></div></div></div></div>');

Sono nuovo con AngularJS e della direttiva e non so come risolvere questo, ma credo che sia un problema con gli ambiti !! Grazie.

UPDATE:

Se cancello portata: {menu: "= drSrc"} che il lavoro e posso digitare quello che voglio, ma il problema è che il mio elemento non è più trascinabili. Penso che sia correlato agli ambiti. Qualcuno può aiutare, per favore?

fonte

2015-04-20 Ayyoub

Non vedo l'input utilizzando qualsiasi modello o variabile nell'ambito. Dov'è il suo valore dovrebbe essere memorizzato? – pfernandom

Non ho davvero capito cosa intendi? puoi spiegare di più? – Ayyoub

puoi creare un plunker o un violino per dimostrare il tuo problema? –

scope: true indica che la vostra direttiva dovrebbe ereditare la portata del suo genitore, ma scope: {menu: '=drSrc'} crea un ambito isolato, che rimuove l'accesso del vostro modello per Alerts. Quando rimuovi scope: {menu: '=drSrc'}, menu non esiste più, quindi scope.menu.x non riesce e il tuo elemento non è più trascinabile.

La soluzione più semplice è utilizzare scope: true e il riferimento scope.drSrc.x, ecc. Anziché scope.menu.x. Con scope: true, si ottiene l'accesso all'ambito del genitore, compresi drSrc e ai dati Alerts utilizzati dal modello.

Questi writeups sono utili in direttive comprensione e gli ambiti:

fonte

2015-05-19 16:13:14

Esattamente, questo è il problema ma non decalifico più drSrc se non lascio ** scope: {menu: '= drSrc'} ** L'ho provato ma nel mio modello cach sto usando la direttiva ** dr-src = "tb" ** e tb è la variabile del mio ambito in cui sto inizializzando il mio ** x ** e ** y ** è esattamente un problema di accesso al mio scope che cosa dovrebbe ho inserito la mia direttiva html? – Ayyoub

È 'tb' sempre inizializzato' {x: 0, y: 0} '? In tal caso, perché estrarlo dall'esterno della direttiva? Quel Plunker che @Dave Alperovich ha chiesto sarebbe stato utile per vedere il tuo caso completo. –

sì è sempre inizializzato '{x: 0, y: 0}'. dove posso tirarlo? all'interno della direttiva? Come lo posso fare ? Stavo cercando di farlo ma ho avuto qualche difficoltà e non è ancora pronto, ci sto ancora lavorando. è la prima volta che cerco di farlo e nel mio progetto sto usando la google map api e non è facile per me farlo più velocemente di così. – Ayyoub

Attualmente sto lavorando ad un progetto che dipende pesantemente su modali finestre di dialogo. Ognuno con il proprio scopo e contenuto dinamico.

Ecco il sistema che ho lavorato con:

index.html

<!doctype html> 
<html ng-app="myApp" ng-controller="MainCtrl"> 
    <head> 
     <title>Dialogs</title> 
     <link rel="stylesheet" href="app.css"> 
    </head> 
    <body> 
     <button ng-click="openDialog()">Open Dialog</button> 
     <modal-dialog show="showMe" dialog-controller="WelcomeDialogCtrl" context="welcome"></modal-dialog> 

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script> 
     <script src="app.js"></script> 
    </body> 
</html>

app.js

var app = angular.module('myApp', []); 

// The main controller, which will handle index.html 
app.controller('MainCtrl', ['$scope', function($scope) { 
    $scope.showMe = false; 

    $scope.openDialog = function(){ 
     $scope.showMe = true; // Show the 'welcome' dialog 
    }; 
}]); 

// The modal dialog directive 
app.directive('modalDialog', [function() { 
    return { 
     controller: '@', // Bind a controller 
     name: 'dialogController', // Bind the controller to this attribute name 
     restrict: 'E', 
     scope: { 
      show: '=' 
     }, 
     link: function(scope, element, attrs) { 
      // Close this dialog (actually ng-hides it) 
      scope.closeDialog = function() { 
       scope.show = false; 
      }; 
     }, 
     templateUrl: function(element, attrs){ 
      // I prefer to load my dialog templates from a separate folder to keep my project tidy 
      return 'dialogs/' + attrs.context + '.html'; 
     } 
    }; 
}]); 

// The 'welcome' dialog has its own controller with its own scope 
app.controller('WelcomeDialogCtrl', ['$scope', function($scope){ 
    // This can be called by the template that resides within the directive 
    $scope.exampleFunction = function(text){ 
     console.log('Example function says: ' + text); 
    }; 
}]);

benvenuto.html

<div class="dialog" ng-show="show"> 
    <div class="dialog-overlay"></div> 
    <div class="dialog-box"> 
     Welcome, be sure to check out this blazin' dialog. 
     <button ng-click="exampleFunction('Hi!')">Say Hi!</button> 
     <button ng-click="closeDialog()">Close</button> 
    </div> 
</div>

app.css

body{ 
    background: #eee; 
    margin: 80px; 
} 

/* 
* Just some fancy schmuck 
*/ 
button{ 
    border-radius: 5px; 
    background: #272; 
    color: #fff; 
    padding: 5px 12px; 
    border: 0; 
} 

/* 
* The grey, transparent curtain. 
*/ 
.dialog-overlay { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    background: #111; 
    opacity: 0.2; 
    top: 0; 
    left: 0; 

    z-index: 100; 
} 

/* 
* The dialog itself. Horribly centered. 
*/ 
.dialog-box{ 
    background: #fff; 
    border-radius: 5px; 
    padding: 10px 20px; 
    position: absolute; 
    width: 600px; 
    height: 300px; 
    top: 50%; 
    left: 50%; 
    margin-left: -300px; 

    z-index: 110; 
}

ho anche fatto un Plunker con lo stesso codice.

fonte

2015-05-26 07:43:59

Problema con più elementi HTML figlio che utilizzano le direttive in AngularJS

risposta

Problemi correlati