Как мы можем передать переменную в изолированной области видимости

У меня есть директива, как показано ниже -

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

В директиве controller я связываю функцию saveMe() с контроллером с изолированной областью действия, как показано ниже -

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');
                        }                        
                    }                        
                }
            });               
        };           
    }]
};

}

До сих пор все работает нормально.

Я добавил uibModal в директиву и открыл всплывающее окно, чтобы получить имя. имя входит в переменную $scope.my_name. Теперь я хочу передать это имя в функцию saveMe(). Если я напрямую передам переменную, как saveMe($scope.my_name); это показывает неопределенный в функции контроллера. Ниже приведена функция контроллера -

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

Можете ли вы, ребята, помочь мне, как я могу передать my_name из модального в метод saveMe. заранее спасибо

Источник

1 ответ

Используйте локальный при определении выражения:

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

Внутри директивы вызовите функцию с объектом, который определяет local:

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

Соглашение для введенных местных жителей должно называть их $ префикс, чтобы отличать их от переменных в родительской области видимости.

ДЕМО

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>

Из документов:

  • & или же &attr - предоставляет способ выполнить выражение в контексте родительской области. Если имя атрибута не указано, то предполагается, что имя атрибута совпадает с локальным именем. Дано <my-component my-attr="count = count + value"> и определение объема изолята scope: { localFn:'&myAttr' }, свойство области видимости изолята localFn будет указывать на обертку функции для count = count + value выражение. Часто желательно передавать данные из изолированной области через выражение в родительскую область. Это можно сделать, передав карту имен и значений локальных переменных в оболочку выражения fn. Например, если выражение increment($amount) Затем мы можем указать значение суммы, позвонив localFn как localFn({$amount: 22}),

- Справочник по API AngularJS - область применения

Источник
Другие вопросы по тегам