Hi,
I had developped an popup system (date picker, dropdown list) loosely based
on https://github.com/bklik/popup
I try to have on one side the popup and on the other side the content of
the popup.
<input ... popup date-picker>
or
<input ... popup client-list>
the popup is basicaly there to display the container and manage is
apparition and disparition.
But I have a problem with scopes.
If I put a private scope on the content directive I can linked with
whatever data i need from the input, but can succeed using 2 different
popup on the same page (on two different input).
If I put the private scope on the popup itself it works but the popup shoul
do the binding but if one of the content directive need a new binding I
don"t know how to declare it.
For example the date picker only need ng-model, but a dropdown list need
the select item ID and the list of values to display, saw need 2 more
bindings... Saw the popup must declare all the bindings.
The scope in the content is the parent scope so it does not have access to
the binding of the popup scope, for this I have used a controller on the
popup to return the scope. Which i think is kind of a hack...
The original code (bklik) use an intermediate directive which declare the
content directive on a dynamic added element and messages to communicate
between the popup and it's content.
module.directive('popup', ['$compile',
'$timeout',
function($compile, $timeout) {
return {
restrict : 'A',
directive: '',
scope: { model: '=ngModel',
values: '=values', value_id: "=valueId" },
controller: function ($scope,
$element) {
this.setContent =
function(content) {
$scope.directive=content ;
$compile($scope.directive)($scope) ;
};
this.closePopup = function() {
$scope.closePopup() }
this.getScope = function() {
return $scope }
},
link : function(scope, element,
attrs)
{ ... /***** construction and
management of the popup ***/ }}]) ;
module.directive('clientList', ['$http', function($http) {
return {
restrict: 'A',
require: 'popup',
link: function(scope, element, attrs,
popupctrl)
{
var scope = popupctrl.getScope() ;
var vthis = this
var pop_element = $("<div
class='pop-list'><div class='pop-item' id='{{ value.id }}' ng-repeat='value
in values'>{{value.label}}</div</div>") ;
popupctrl.setContent(pop_element)
;
pop_element.on('click',
'.pop-item', function() { scope.value_id = $(this).attr('id'); scope.model
= $(this).html(); scope.$apply(); popupctrl.closePopup(); })
this.loadDatas =
function(client_filter)
{
var params = { page:
'datas/clients', client_filter: client_filter, session_id: session.id,
session_user: session.user }
var req = { method: 'POST', url:
"action_ajax.php", data: $.param(params), headers :
{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'} }
$http(req).success(function(data) { scope.values = data; }) ;
}
scope.$watch('model',
function(newvalue) { console.log(newvalue) ; vthis.loadDatas(newvalue) }) ;
}
}
}]);
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
