Question

我有一个类似下面的指令-

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

在指令控制器中，我将控制器的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方法。预先感谢

Answer 1

在定义表达式时使用本地：

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

在指令中，使用定义本地的对象调用函数：

$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-提供了一种在父作用域的上下文中执行表达式的方法。如果未指定attr名称，则假定属性名称与本地名称相同。给定<my-component my-attr="count = count + value">和隔离范围定义scope: { localFn:'&myAttr' }，隔离范围属性localFn将指向count = count + value表达式的函数包装。通常，需要将数据从隔离范围通过表达式传递到父范围。这可以通过将局部变量名称和值的映射传递到表达式包装器fn中来完成。例如，如果表达式为increment($amount)，则可以通过将localFn称为localFn({$amount: 22})来指定金额值。


— AngularJS Comprehensive Directive API Reference - scope

我们如何在隔离范围函数中传递变量

1 个答案: