Pass $scope.model from directive to controller (Angularjs)

Question

I have checked all the other posts and trust me, this is not a duplicate. Hope someone can help me. Here is the code.

HTML Code- When user clicks on Report, buildData gets executed. multiselect directive name is mu-ls.

<button ng-click="buildData(selected_items)">Report</button>
<div>Universe:</div>
<div><mu-ls pre-selected="member.roles" model="selected_items" options="roles"></muls></div>

Directive Code- The directive name is muLs. User can select multiple options using this directive. The $scope.model gives the array of ids which user selected.

angular.module('Select').directive('muLs', function () {
  return {
    restrict: 'E',
    scope: {
        model: '=',
        options: '=',
        pre_selected: '=preSelected'
    },
    template: "<div data-ng-class='{open: open}'>" +
                        "<button data-ng-click='open=!open;openDropdown()'>Select...</button>" +
                            "<ul aria-labelledby='dropdownMenu'>" +
                                "<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>" +
                            "</ul>" +
                    "</div>",

    controller: function ($scope) {

        $scope.openDropdown = function () {
            $scope.selected_items = [];
            for (var i = 0; i < $scope.pre_selected.length; i++) {
                $scope.selected_items.push($scope.pre_selected[i].id);
            }
        };

        $scope.setSelectedItem = function () {
            var id = this.option.id;
            if (_.contains($scope.model, id)) {
                $scope.model = _.without($scope.model, id);
            } else {
                $scope.model.push(id);
            }
            console.log($scope.model);
            return false;
        };

        $scope.isChecked = function (id) {
            if (_.contains($scope.model, id)) {
                return 'glyphicon glyphicon-ok pull-right';
            }
            return false;
        };

    }
}
});

Controller Code- This should show the list of selected items listed above in the controller side. It shows undefined at the moment.

'use strict'
var Modd= angular.module('Select', []);
Modd.controller('SelectController', function ($scope, $timeout, $rootScope) {

  $scope.roles = [
    { "id": 1, "name": "USA" },
    { "id": 2, "name": "France" },
    { "id": 3, "name": "Russia" }
  ];

  $scope.member = { roles: [] };
  $scope.selected_items = [];

  $scope.buildData = function (selected_items) {
    console.log("This is", $scope.model); 
  }
});

QUESTION- How can i use this directive value $scope.model in the controller side ??? Please suggest guys !!!

I tried $scope.selected_items first. It gives a list of selected items only once. Once i click Report button, it will give the list. If i again start clicking and deselecting list items, it would still show the previous values. not the current ones.

$scope.model continues to show the latest values selected.

Will · Accepted Answer · 2015-11-18 21:17:46Z

1

You are passing selected_items to your directive so it will contain the value of model in your controller.

$scope.buildData = function () {
    console.log("This is", $scope.selected_items);
}

edited Nov 18, 2015 at 21:17

answered Nov 18, 2015 at 20:54

Will

2,89022 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ayesha Over a year ago

@DenimChicken- updated my question based on what you mentioned.

Will Over a year ago

@Ayesha this solution is working fine for me. Here's a fiddle to show you: jsfiddle.net/9f9kud3n

Ayesha Over a year ago

@DenimChicken- this is driving me nuts. i dont know why i am not to get the similar output. does it make any difference when i am having directive, controller and templete seperately. tats wat i can think of right now. did u modify the code apart from mentioning $scope.selected_items >??

Will Over a year ago

@Ayesha having them separate shouldn't matter. I didn't modify anything else. I don't think it should make any difference but I'm using angular 1.3.15 in that fiddle.

Ayesha Over a year ago

thanks for cross checking it. i was about to check that now. i will have to figure out why it doesnt work for my case.

Sean Larkin · Accepted Answer · 2015-11-18 20:54:38Z

1

model is two-way bound. So if you assign a $scope variable from your controller to the module attribute, it will be updated when the selected value changes.

Therefore you can console.log($scope.selected_items);

answered Nov 18, 2015 at 20:54

Sean Larkin

6,4401 gold badge31 silver badges43 bronze badges

1 Comment

Ayesha Over a year ago

@SeanLarkin- updated my question based on what you mentioned.

Collectives™ on Stack Overflow

Pass $scope.model from directive to controller (Angularjs)

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related