Why I get error when I try to use custom directive.

Question

I am using this link to implement DropdownmultiSelect in my tutorial project.

Here how I define directive at my tutorial project:

(function () {
    "use strict";

    angular.module("gameBuilder").directive('dropdownMultiselect', [dropdownMultiselect]);

    function dropdownMultiselect() {
        return {
            restrict: 'E',
            scope: {
                model: '=',
                options: '=',
                pre_selected: '=preSelected'
            },
            template: "<div class='btn-group' data-ng-class='{open: open}'>" +
             "<button class='btn btn-small'>Select</button>" +
                     "<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><span class='caret'></span></button>" +
                     "<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>" +
                         "<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i>  Check All</a></li>" +
                         "<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i>  Uncheck All</a></li>" +
                         "<li class='divider'></li>" +
                         "<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.selectAll = function () {
                    $scope.model = _.pluck($scope.options, 'id');
                    console.log($scope.model);
                };
                $scope.deselectAll = function () {
                    $scope.model = [];
                    console.log($scope.model);
                };
                $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 'icon-ok pull-right';
                    }
                    return false;
                };
            }
        }

    }
})();

Here is controller definition:

    (function () {
    "use strict";
    angular.module("gameBuilder", ["ui.router", "templates"])
        .config([
            "$stateProvider",
            function ($stateProvider) {
                $stateProvider
                    .state("gameBuilder", {
                        abstract: true,
                        url: "/gameBuilder",
                        template: "<ui-view></ui-view>"
                    })
                    .state("gameBuilder.list", {
                        url: "/",
                        templateUrl: "app/gameBuilder/templates/gameBuilderList.tmpl.html",
                        controller: "gameBuilderListController",
                        controllerAs: "list"
                    })
                    .state("gameBuilder.view", {
                        url: "/:gameId",
                        templateUrl: "app/gameBuilder/templates/gameBuilder.tmpl.html",
                        controller: "gameBuilderController",
                        controllerAs: "builder"
                    })
                .state("gameBuilder.view.step1", {
                    url: '/step1',
                    templateUrl: "../app/gameBuilder/templates/NestedViews/FormStep1.html"
                })
                .state("gameBuilder.view.step2", {
                    url: '/step2',
                    templateUrl: "../app/gameBuilder/templates/NestedViews/FormStep2.html"
                })
                .state("gameBuilder.view.step3", {
                    url: '/step3',
                    templateUrl: "../app/gameBuilder/templates/NestedViews/FormStep3.html"
                });
            }
        ]);
})();

Here is how I use it in view:

<div class="form-group">
        <dropdown-multiselect pre-selected="game.member.roles" model="game.selected_items" options="game.roles"></dropdown-multiselect>
        <pre>
            selected roles = {{game.selected_items | json}}
        </pre>
    </div>

But I get this error:

ReferenceError: _ is not defined
    at Scope.$scope.isChecked (inspectionsBuilder.js:150)
    at Object.$parseFunctionCall [as get] (angular.js:12332)
    at Scope.$digest (angular.js:14217)
    at Scope.$apply (angular.js:14488)
    at done (angular.js:9646)
    at completeRequest (angular.js:9836)
    at XMLHttpRequest.requestLoaded (angular.js:9777)

Answer 1

You made a typo inside your isolate scope declaration, It should be preSelected instead of pre_selectedfollow the camel-casing also replace the $scope.pre_selected with $scope.preSelected

Code

scope: {
   model: '=',
   options: '=',
   preSelected: '=preSelected' //<--change here
},

Answer 2

Have you included underscore/lo-dash? "ReferenceError: _ is not defined" usually appears when you haven't loaded library