0

我有如下指令-

<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 方法。提前致谢

4

1 回答 1

0

定义表达式时使用局部变量：

<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 来完成。例如，如果表达式是，那么我们可以通过调用asincrement($amount)来指定金额值。localFnlocalFn({$amount: 22})

— AngularJS 综合指令 API 参考 - 范围

于 2018-08-22T15:42:57.980 回答