How can we pass variable in isolated scope function

Question

I have a directive like below -

<div data-my-param-control data-save-me="saveMe()"></div>

In directive controller, I bind saveMe() function from controller with isolated scope & like below -

function MyParamControlDirective($filter,
                                 $state,
                                 $stateParams,
                                 $uibModal,
                                 ) {
return {
    restrict: 'AE',
    scope: {
        saveMe: '&',         
    },
    templateUrl: 'html/myhtml',
    controller: ['$scope', function ($scope) {  
            $scope.saveMeHandler = function () {
            var saveMe = $scope.saveMe();
            $uibModal.open({
                animation: false,
                windowTopClass: '',
                templateUrl: 'html/askmyname',
                size: 'sm',       
                resolve: {
                    saveMe: function () {
                        return saveMe;
                    }
                },                         
                controller: function (
                                        $scope,                                         
                                        $uibModalInstance,
                                        saveMe,                                         
                                        toastr                                 
                                      ) 
                {                    

                    $scope.close = function () {                            
                        $uibModalInstance.close();
                    };                        
                    $scope.saveMyName = function() {
                        $scope.submited =  true;                           
                        if ($scope.my_name != "undefined" && $scope.my_name != "") {                                                                
                            saveMe();
                            $scope.close();
                        } else {
                            toastr.error('Please enter search name');
                        }                        
                    }                        
                }
            });               
        };           
    }]
};

}

Everything is working fine till now.

I added a uibModal in directive and open a popup to get a name. the name comes in $scope.my_name variable. Now I want to pass this name in function saveMe(). If I directly pass variable like saveMe($scope.my_name); it shows undefined in controller function. Below is the controller function -

$scope.saveMe = function () {
    //logic here to save data
};

Can you guys help me how can I pass my_name from modal to saveMe method. Thanks in advance

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

Use a local when defining the expression:

<custom-directive on-save="saveMe($event)">
</custom-directive>

Inside the directive, invoke the function with an object that defines the local:

$scope.onSave({$event: message})">

The convention for injected locals is to name them with a $ prefix to differentiate them from variables on parent scope.

The DEMO

angular.module("app",[])
.directive("customDirective",function() {
    return {
        scope: {
            onSave: '&',
        },
        template: `
            <fieldset>
                <input ng-model="message"><br>
                <button ng-click="onSave({$event: message})">Save</button>
            </fieldset>
        `,
    };
})

<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app">
    <custom-directive on-save="message=$event">
    </custom-directive>
    <br>
    message={{message}}
</body>

From the Docs:

& or &attr - provides a way to execute an expression in the context of the parent scope. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given <my-component my-attr="count = count + value"> and the isolate scope definition scope: { localFn:'&myAttr' }, the isolate scope property localFn will point to a function wrapper for the count = count + value expression. Often it's desirable to pass data from the isolated scope via an expression to the parent scope. This can be done by passing a map of local variable names and values into the expression wrapper fn. For example, if the expression is increment($amount) then we can specify the amount value by calling the localFn as localFn({$amount: 22}).

— AngularJS Comprehensive Directive API Reference - scope

This is not clear. The issue is that - directive has another controller of uibmodal and the variable "$scope.my_name" is accessible only from that controller. I resolved the function "saveMe" inside the uibmodal but not able to pass variable like saveMe($scope.my_name). Please explain with my example — s.jain, Aug 23 '18 at 11:01

How can we pass variable in isolated scope function

1 Answers1