AngularJs, $scope.variable is undefined in a directive

Question

In my html file , I use a directive which is a searchBox:

<ng-lms-search-box searchType="Author" maxResult=5 data-ng-model="searchText"> </ng-lms-search-box>

And this is the function where I define the directive in app.js:

lmsModule.directive('ngLmsSearchBox', [ '$http', function($http) {
    return {
        restrict : 'E',
        replace : 'true',
        $scope : {
            searchType : '@searchType',
            searchText : '@ngModel',
        },
        templateUrl : '../templates/searchBox.html',
        bindToController : true,
        link : function($scope, element, attrs) {
            console.log($scope.searchType);
            if ($scope.searchType == "Author") {
                element.bind('keyup', function() {
                    $http.post("listAuthor/" + $scope.searchText + "/1", {
                        'Content-Type' : 'application/json'
                    }).success(function(data) {
                        $scope.$emit("passData", data);
                    });
                });
            } else if ($scope.searchtype == "Publishers") {
            } else {
            }
        },
    };
} ]);

The $scope.searchType which should be "author" is, however, "undefined".

Anyone knows why? Thanks in advance!

Answer 1

HTML should be snake-case:

  search-type="Author"

And camelCase in your directive definition.

 $scope.searchType

Answer 2

declaring variable in the template should be with dash delimeter as below,because you have used scope variable as searchType , which is camel case. and its should be scope not $scope , inside DDO (directive defintion direcitve)

search-type

refer : https://docs.angularjs.org/guide/directive

<ng-lms-search-box search-type="Author" maxResult=5 data-ng-model="searchText"> </ng-lms-search-box>