How To Pass variable Value in AngularJS Directive?

Question

I have a directive in AngularJS and I have used the Directive in html page. The directive expects a parameter which is provied hard coded

<md-button class="md-button md-raised md-theme-white list pull-right">
<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" select-organization-list="Advertiser" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>
<md-tooltip md-direction="buttom">
Select Advertiser
</md-tooltip>
</md-button>

how can i pass the variable in that directive select-organization-list.

I tried by defining the variable the in angularJS vm.CompanyType = "Advertiser"; and in html like select-organization-list="vm.CompanyType" it dosen't works the value in directive goes as "vm.CompanyType" not "Advertiser"? How can I fix this ??

Here is my Directive

.directive("selectOrganizationList",
            function ($rootScope, $mdDialog, organizationService, $parse, $localStorage, sharedServices, organizationFactory) {
                return {
                    restrict: "A",
                    scope: {
                        ngModel: "=?",
                        //isolatedExpression: '&'
                        onselectCustomEvent: "&"

                    },
                    template: "<div></div>",
                    // controller: "crudgridController as vm",
                    link: function (scope, element, $attrs) {

                        //var CompanyType = $attrs.selectOrganizationList || null;

                        $(element).on("click",
                            function (e) {
                                scope.OpenModalAddContract_OrganizationList = function (ev, valueFor) {
                                    var mynewscope = $rootScope.$new();
                                    scope.itemsOrganization = [];
                                    var te = this;
                                    te.Search = [];
                                    te.Search.PageSize = 10;
                                    te.Search.SearchClick = $attrs.clickFrom;
                                    te.Search.MediaSearch = $attrs.clickFrom;
                                    te.Search.Retired = false;

                                    //////Swoyuj: When clicked from add/edit Contract Page, "PopupOrganization DivisionID" should be "Contract DivisionID"
                                    //if ($attrs.clickFrom == "Contract") {
                                    //    te.Search.DivisionID = parseInt($attrs.divisionId);
                                    //    te.Search.DivisionIDList = [$attrs.divisionId];
                                    //}
                                    if ($attrs.selectOrganizationList == "AdAgency") {
                                        te.Search.CompanyType = "AA";
                                    }

                                    if ($attrs.selectOrganizationList == "Advertiser") {
                                        te.Search.CompanyTypeList = ['AA', 'AD']
                                    }

                                    if ($attrs.selectOrganizationList == "Billboard") {
                                        te.Search.CompanyType = "BO";
                                    }

                                    if ($attrs.selectOrganizationList == "All") {
                                        te.Search.CompanyType = "";
                                    }

parth kabariya · Accepted Answer · 2019-05-03 06:43:50Z

2

Try this.

restrict: 'EA',
scope: {
   CompanyType: '='
},

then you should be able to access your variable by "scope.CompanyType" in your directive.

<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" CompanyType="Advertiser" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>

edited May 3, 2019 at 6:43

answered May 3, 2019 at 5:57

parth kabariya

2562 silver badges6 bronze badges

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

2 Comments

Biraz Dahal Over a year ago

and how do i pass value in html?

parth kabariya Over a year ago

You can access that variable in html by only variable name "CompanyType" as you do it normally. A directive is nothing new but it's more like inner level structure which has separate js and html.

Harshad · Accepted Answer · 2019-05-03 13:27:22Z

1

You can also pass the value from the HTML directly.

<i class="fa fa-pencil-square-o ng-scope" aria-hidden="true" CompanyType="{{vm.companyType}}" click-from="ClickFromSearch" onselect-Custom-Event="OpenModalOrganizationList(org, 'documentCompany')" ng-model='org'></i>

answered May 3, 2019 at 13:27

Harshad

1341 silver badge6 bronze badges

Collectives™ on Stack Overflow

How To Pass variable Value in AngularJS Directive?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related