We Keep Coding

angularjs - get ng-repeat element using element.html() inside a jsPanel directive

I am trying to create a directive which will take the html content and place it n a jsPanel element.
So far I am able to compile the scope and able get elements with the scope. Then i tried to get html tag with ng-repeat, where i got stuck.
Following is the code used to create the directive
mainApp.directive('jspanelcontent', function($compile) {
console.log("loading");
var directive = {};
directive.restrict = 'AE';
directive.compile = function(element, attributes) {
var linkFunction = function($scope, element, attributes) {
console.log(element.html());
var contenthtml = element.html();
contenthtml = angular.element($compile(contenthtml)($scope));
element.html("");
$scope.jspanleinstance = $.jsPanel({
position: {
my: "left-bottom",
at: "left-bottom",
offsetY: 15
},
theme: "rebeccapurple",
contentSize: {
width: 600,
height: 350
},
headerTitle: attributes.panelcaption,
content: contenthtml,
});
// });
}
return linkFunction;
}
return directive;
});
And using like following in html
<div jspanelcontent panelcaption="list">
<div ng-controller="ListController">
{{test}}
<div ng-repeat="user in users">
<span>{{user.id}}</span>
<span>{{user.name}}</span>
<span>{{user.email}}</span>
<br />
</div>
</div>
The console log returns as
Output i am getting (jsPanel)
As you see the "test" variable is properly bind and the ng-repeat element is display as commented, I am not aware why it's returning like that. If anyone can figure out the issue, then i might get it working.
I know i can access the users data as $scope.users inside the directive. The problem here is that user able to use the directive commonly, so i have to assume that i don't the variables in the $scope.
I stuck in this place, and couldn't find any solutions to try. Any suggestions or solutions will be more helpful. :)
NOTE: No syntax errors, outside the directive the data is displaying (Tested)

Rich tabs and transcluded content

I currently have this problem: I made 3 directives (check plunkr for a 'reduced' test case, dont mind the closures they come from Typescript) that control tabs, using a controller to keep them grouped, since I can have more than one tabbed content on the current view. The problem happens when the tab itself has some bindings that are located outside of the scope, and when the tab is 'transcluded' in place, the binding never updates because the scope is different.
Here is the plunkr http://plnkr.co/edit/fnw1oV?p=preview and here is the "tab transclude" part that is important
this.link = function (scope, element, attr) {
var clickEvent, el, item;
item = scope.item;
console.log(scope);
el = item.element.filter('.is-tab');
el.addClass('picker-tabs-item');
clickEvent = 'tabs.select(item);';
if (el.is('[ng-click]')) {
clickEvent += el.attr('ng-click') + ';';
}
el.attr('ng-click', clickEvent);
el.attr('ng-class', 'tabs.classes(item)');
item.element = $compile(item.element)(scope);
element.replaceWith(item.element);
};
The current approach feels hacky (keeping the original scope and element in an array). Plus in my app, the data is loaded after the tabs were loaded, so it can't even retain some initial state. The tabs look like this right now:
and the way it should look like (but doesn't work, as you can see clicking one tab select all of them):
A real tab code from my app:
<div class="clearfix" login-space user-space>
<div class="picker clearfix" ng-class="{'to-hide': user.data.get('incomplete') || checkout.checkoutForm.$invalid}">
<div class="pick-title icon icon-pay">Forma de Pagamento</div>
<div class="for-hiding">
<div tabs="pagamento">
<div tab="/templates/tabs/plans/credito" selected="true">
<button class="is-tab clicky" ng-disabled="checkout.disabledTab('credito')" type="button">
Cartão
<span class="pick-pill-indicator-placeholder" ng-bind="checkout.total('credito')"></span>
</button>
</div>
<div tab="/templates/tabs/plans/debito">
<button class="is-tab clicky" ng-disabled="checkout.disabledTab('debito')" type="button">
Débito
<span class="pick-pill-indicator-placeholder" ng-bind="checkout.total('debito')"></span>
</button>
</div>
<div tab="/templates/tabs/plans/boleto">
<button class="is-tab clicky" ng-disabled="checkout.disabledTab('boleto')" type="button">
Boleto
<span class="pick-pill-indicator-placeholder" ng-bind="checkout.total('boleto')"></span>
</button>
</div>
</div>
</div>
</div>
</div>
login-space and user-space are directives just to assign it to the login and user controllers. checkout is the current controller inside ui-view.
$stateProvider.state('planos.checkout', {
url: '/checkout',
templateUrl: '/templates/partials/plans/checkout',
controllerAs: 'checkout',
controller: Controllers.Checkout,
data: {
allowed: false,
enclosed: true
}
});
since the checkout controller must be instantiated only once, I can't reinstantiate it, but still need to access it's functions and bound data.
'/templates/partials/plans/checkout' contains the tab code above (so yes, technically it's in the same scope as checkout controller)

In your plunker, changing your tabs to this:
<span data-subctrl="">{{ subctrl.sum('credito') }}</span>
Showed the sum. I looked at what subctrl was and you have it as a directive, that's why subctrl.sum is not working. Plunker with it working: http://plnkr.co/edit/qwEHMqfzJ6pC79hM8cDj?p=preview
If that's not what's wrong with your application, then please describe it a little more.

Solved this by removing the html content of the tab, and applying a different scope to the inner content, then reattaching to the original element.
this.link = function (scope, element, attr) {
var clickEvent, el, item;
item = scope.item;
console.log(scope);
el = item.element.filter('.is-tab');
var contents = el.html(); //added
el.empty(); // added
el.addClass('picker-tabs-item');
clickEvent = 'tabs.select(item);';
if (el.is('[ng-click]')) {
clickEvent += el.attr('ng-click') + ';';
}
el.attr('ng-click', clickEvent);
el.attr('ng-class', 'tabs.classes(item)');
item.element = $compile(item.element)(scope);
item.element.append($compile('<div>' + contents + '</div>')(item.scope)); //added
element.replaceWith(item.element);
};

Setting dynamic click and model expressions with AngularJS

I have this inside a ng-repeat block:
{{item.type}}
<div ng-show="collapsed{{$index}}">
{{item.type}}
</div>
I need to have each iteration keep track of its own collapsed state. I get all sorts of errors trying to do the above. The ng-model doesn't like {{ }}'s, the ng-click doesn't seem to either. I've also tried [$index] without much luck.
Any ideas on the proper way to do this?

In your controller, you can try to introduce an array of booleans, where it keeps the collapse state of each item in your list.
// if every one of them starts off in a collapsed state, all booleans are true
$scope.collapses = [true, true, true, ...];
Then it just becomes
<a ng-click="toggle($index)">{{item.type}}</a>
<div ng-hide="collapses[$index]">{{item.type}}</div>
As for the toggle() function:
$scope.toggle = function(index) { collapses[index] = !collapses[index]; };

I think it would be a lot cleaner to keep track of the collapsed state if you put this into a controller:
Javascript:
app.controller('collapseCtrl', ['$scope', function($scope){
$scope.collapsed = true;
$scope.toggle = function(){
$scope.collapsed = !$scope.collapsed;
};
}]);
HTML:
<div ng-controller="collapseCtrl">
{{item.type}}
<div ng-show="collapsed">
{{item.type}}
</div>
</div>

applying different expression for ng-class

Hi I'm trying to change the color of a button based on the value of this variable: $scope.order.orderwindow.invoicedata.
I'm changing the expression in ng-class to do this. However, right now it's not changing despite my watch function.
directive.js
.directive('invoicetypewatch', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
// change styling of button depending on if id is null or not
scope.$watch('order.orderwindow.invoicedata', function() {
if(scope.order.orderwindow.invoicedata.id!=null) {
scope.invoice_delete_type_button_styling={"btn btn-danger btn-block":true};
}else{
scope.invoice_delete_type_button_styling={"btn btn-danger btn-block":false};
}
});
}
};
})
view.html
<div class="col-lg-4" invoicetypewatch>
<button ng-class="{{invoice_delete_type_button_styling}}" ng-click="delete(invoice_delete_type_button,order.orderwindow.invoicedata.id)">{{invoice_delete_type_button}}</button>
</div>

I think you just need to assign the class in the directive - no need for the map object:
if(scope.order.orderwindow.invoicedata.id!=null) {
scope.invoice_delete_type_button_styling="btn btn-danger btn-block";
}else{
scope.invoice_delete_type_button_styling="btn btn-success";
}
Then just use that scope variable in ng-class without the {{}} since ng-class evaluates whatever is passed in
<button ng-class="invoice_delete_type_button_styling"
You do not need {{}} for ng-class because it already takes an expression or a string. You would use {{}} if you were just using class it would be evaluated
<button class="{{invoice_delete_type_button_styling}}"

I cannot test the code, as I do not know how order.orderwindow.invoicedata is changed, but my suggestion would be to drop the watch completly and change your view to:
<div class="col-lg-4" invoicetypewatch>
<button ng-class="{'btn btn-danger btn-block':(scope.order.orderwindow.invoicedata.id!=null)}"
ng-click="delete(invoice_delete_type_button,order.orderwindow.invoicedata.id)"> {{invoice_delete_type_button}}</button>
</div>
This could work but it still depends on how order.orderwindow.invoicedata changes. Makes sure the change happens inside your angular application and starts a new digest cycle.

AngularJS Drag and Drop between lists breaks with 1.2

I've been using an implementation of this Drag and Drop with AngularJS and jQuery UI:
http://www.smartjava.org/examples/dnd/double.html
With AngularJS 1.0.8 it works flawlessly. With 1.2.11, it doesn't.
When using AngularJS 1.2 and dragging an item from the left list to the right one the model for the destination list updates correctly. However the DOM doesn't update correctly. Here is the directive that's being used from the example:
app.directive('dndBetweenList', function($parse) {
return function(scope, element, attrs) {
// contains the args for this component
var args = attrs.dndBetweenList.split(',');
// contains the args for the target
var targetArgs = $('#'+args[1]).attr('dnd-between-list').split(',');
// variables used for dnd
var toUpdate;
var target;
var startIndex = -1;
// watch the model, so we always know what element
// is at a specific position
scope.$watch(args[0], function(value) {
toUpdate = value;
},true);
// also watch for changes in the target list
scope.$watch(targetArgs[0], function(value) {
target = value;
},true);
// use jquery to make the element sortable (dnd). This is called
// when the element is rendered
$(element[0]).sortable({
items:'li',
start:function (event, ui) {
// on start we define where the item is dragged from
startIndex = ($(ui.item).index());
},
stop:function (event, ui) {
var newParent = ui.item[0].parentNode.id;
// on stop we determine the new index of the
// item and store it there
var newIndex = ($(ui.item).index());
var toMove = toUpdate[startIndex];
// we need to remove him from the configured model
toUpdate.splice(startIndex,1);
if (newParent == args[1]) {
// and add it to the linked list
target.splice(newIndex,0,toMove);
} else {
toUpdate.splice(newIndex,0,toMove);
}
// we move items in the array, if we want
// to trigger an update in angular use $apply()
// since we're outside angulars lifecycle
scope.$apply(targetArgs[0]);
scope.$apply(args[0]);
},
connectWith:'#'+args[1]
})
}
});
Does something need to be updated for this to work properly with Angular 1.2? I feel like it has something to do with the scope.$apply but am not sure.

I see this is an older question, but I recently ran into the exact same issue with the Drag and Drop example. I don’t know what has changed between angular 1.0.8 and 1.2, but it appears to be the digest cycle that causes problems with the DOM. scope.$apply will trigger a digest cycle, but scope.$apply in and of itself is not the issue. Anything that causes a cycle can cause the DOM t get out of sync with the model.
I was able to find a solution to the the problem using the ui.sortable directive. The specific branch that I used is here: https://github.com/angular-ui/ui-sortable/tree/angular1.2. I have not tested with other branches.
You can view a working example here:
http://plnkr.co/edit/atoDX2TqZT654dEicqeS?p=preview
Using the ui-sortable solution, the ‘dndBetweenList’ directive gets replaced with the ui-sortable directive. Then there are a few changes to make.
In the HTML
<div class="row">
<div class="span4 offset2">
<ul ui-sortable="sortableOptions" ng-model="source" id="sourceList" ng-class="{'minimalList':sourceEmpty()}" class="connector">
<li class="alert alert-danger nomargin" ng-repeat="item in source">{{item.value}}</li>
</ul>
</div>
<div class="span4">
<ul ui-sortable="sortableOptions" id="targetList" ng-model="model" ng-class="{'minimalList':sourceEmpty()}" class="connector">
<li class="alert alert-info nomargin" ng-repeat="item in model">{{item.value}}</li>
</ul>
</div>
</div>
Note the dnd-between-list directive is no longer needed and is replaced with the ui-sortable.
In the module inject the ui-sortable, and in the controller specify that sortable options. The sortable accepts the same options as the jquery sortable.
app.js
var app = angular.module('dnd', ['ui.sortable']);
ctrl-dnd.js
$scope.sortableOptions = {
connectWith: '.connector'
}
Only the additions to the controller are shown. Note that I added a .connector class on the ul. In the sortable I use .connector for the connectWith option.