0

I've used the following solution (accepted answer) to create a new directive for my list of checkboxes: How can I get angular.js checkboxes with select/unselect all functionality and indeterminate values? and I want to show the following buttons block when at least one item is selected:

<div class="btn-group pull-right mrr5" data-ng-show="masterChecked">

    <button class="btn btn-danger"><i class="icon-trash"></i> Remove selected</button>
    <button class="btn btn-info"><i class="icon-download icon-white"></i> Export selected as .csv</button>

</div>

As you can see I'm using the 'data-ng-show' attribute with the 'masterChecked' assigned to it, which is set within the controller of the directive based on the status of the 'master':

<input type="checkbox" data-ng-model="master" data-ng-change="masterChange()">

but for some reason whether I check it or not - the buttons do not show up. Any idea what I might be doing wrong?

Here's the fiddle : http://jsfiddle.net/scabro/Ahe2X/10/

Community
  • 1
  • 1
Spencer Mark
  • 5,263
  • 9
  • 29
  • 58

2 Answers2

2

it seems you are just trying to check the value of another $scope variable ( the one from the directive ) in your main controller

In order to have the same one, you can pass it as another attribute in your directive

I let you check this fiddle : http://jsfiddle.net/DotDotDot/Ahe2X/22/

I just modified 3 little points :

First, I created the masterChecked value in the main controller : 

cmdApp.controller('UserController', function($scope) {
    $scope.masterChecked=false;
    ....

we add the masterChecked value in the directive's scope, in order to have the same variable everywhere

scope: { checkboxes: '=', masterChecked:"=" },

then, we can call the directive with another attribute : 

<three-state-checkbox checkboxes="users" class="select-all-cb" master-checked="masterChecked">

And now, you are manipulating the masterChecked variable from your main controller in your directive, and it works :)

DotDotDot
  • 3,566
  • 2
  • 20
  • 22
  • Thanks @DotDotDot - does it mean I'll have to include the '$scope.masterChecked=false;' within each controller that requires this functionality? – Spencer Mark Jul 25 '13 at 12:44
  • It depends mostly on your code, the concept here is to tell the directive to manipulate the value already created in the controller, and not a new one which would be created only in the directive's $scope. This will only work if your directive is called somewhere where the controller $scope is accessible ( it's the purpose of `master-checked="masterChecked"`, you tell the directive to use the current controller's $scope.masterChecked ). If it's for another controller, you should consider sharing the masterChecked variable, like in the $rootScope for example (not sure if it's the best solution) – DotDotDot Jul 25 '13 at 13:11
  • Well - actually, it appears I don't have to add the '$scope.masterChecked=false;' to the 'UserController' - it works with it being only in the directive :) : http://jsfiddle.net/Ahe2X/27/ – Spencer Mark Jul 25 '13 at 13:35
0

Try this fiddle.

<div class="btn-group pull-right mrr5" data-ng-show="display">

$scope.cbChange = function () {
    $scope.display = !$scope.display;
}

Let me know if that works for you or not, I can update it accordingly.

dcodesmith
  • 9,590
  • 4
  • 36
  • 40