icenter user01
icenter user01

Reputation: 57

How to pass model value to a custom directive?

I have a textbox Role and i want to check whether role already exists in database or not on the server side for that i have created a directive uniqueRole now i want to pass the textbox value to that directive how to do that.

**HTML**

   <input type="text" class="role-textbox" id="rolename" name="rolename" required  ng-model="roledetails.name" unique-role send-value="roledetails.name" placeholder="{{::'placeholder.addRole.name'|translate}}">

**Controller**

    'use strict';
    define([
        'angular',
        './module',
    ], function(angular, directives) {
        directives.directive('uniqueRole', function($timeout, $q, restClientTemplate) {
            return {
                restrict: 'AE',
                require: 'ngModel',
 scope:{
         sendValue: '='
        },
                link: function(scope, elm, attr, model) {
                    model.$asyncValidators.usernameExists = function(roledata) {
                        var defer = $q.defer();
                        console.log("gng to call controller");

                        restClientTemplate.execute({
                            method: 'POST',
                            url: 'json/check/role',
                            data: roledata

                        }).then(function(response) {
                            roledata = response.results;
                            defer.resolve(roledata);

                        }, function(error) {
                            defer.reject(error);
                        });

                        $timeout(function() {
                            model.$setValidity('usernameExists', false);
                            defer.resolve;
                        }, 1000);
                        return defer.promise;
                    };
                }
            }
        });
    });

Upvotes: 2

Views: 1334

Answers (2)

QI.soa
QI.soa

Reputation: 117

HTML

<input type="text" class="role-textbox" id="rolename" name="rolename" required unique-role send-value="roledetails.name"  ng-model="roledetails.name" placeholder="{{::'placeholder.addRole.name'|translate}}">

Controller add a property in the object

scope:{
 sendValue: '='
}

the scope.sendValue in the directive will bind to the text value in your controller

Upvotes: 0

Peter_Fretter
Peter_Fretter

Reputation: 1165

You basically want to know how to send data to your custom directive? If that is the case here is an example, on your input you should have something like:

<input unique-role data="customData">

Where customData is a property defined inside you controller that is responsible for the current view. The property should be attached to your controller through $scope.

Now inside the directive:

scope: {
    data: '='
}

And you would have access inside the directive through the scope to data. Keep in mind that there are 3 ways of binding data to directives, that is one of the ways, you can read more about it here.

Upvotes: 1

Related Questions