将输入值传递给 $mdDialog [英] Pass input value to $mdDialog

问题描述

我正在尝试将表单输入传递给我的对话框(例如作为标题).问题是:它没有得到 $scope 的形式.

如果我在控制器中设置了 $scope，它将正常显示(例如，参见 $scope.text).但是，如果我尝试获取表单 $scope(参见 `$scope.taskTitle)，它就不会显示任何内容.查看我的代码:

JavaScript

app.controller('tasksCtrl', ['$scope', '$mdDialog', function($scope, $mdDialog){$scope.teste = '只是一个测试，伙计';$scope.expandTask = function() {$mdDialog.show({clickOutsideToClose: 真,控制器:对话控制器，范围:$范围，保留范围:真，templateUrl: 'models/dialog.tmpl.php',当地人:{id: $scope.tasklist.id,标题:$scope.taskTitle}});}函数 DialogController($scope, $mdDialog, id, title) {$scope.id = id;$scope.title = 标题；$scope.hide = function() {$mdDialog.hide();};$scope.cancel = function() {$mdDialog.cancel();};}}]);

HTML

<md-input-container flex="100"><label>新任务...</label><input type="text" ng-model="taskTitle" name="taskTitle"><md-button aria-label="Expandir Tarefa" class="md-icon-button expand-icon" ng-click="expandTask()"><md-tooltip hide-sm>展开任务</md-tooltip><i class="fa fa-expand"></i></md-button></md-input-container>{{任务标题}}

解决方案

您应该将 task 对象从 ng-repeat 传入 ng-click.

例如 ng-click="expandTask($event, task)"

并且在您的 $mdDialog 控制器中，您将可以访问该对象:

app.controller('tasksCtrl', ['$scope', '$mdDialog', function ($scope, $mdDialog) {$scope.expandTask = function (e, task) {//ng-click="expandTask($event, task)"$mdDialog.show({clickOutsideToClose: 真,控制器:函数($mdDialog){var vm = 这个；vm.task = {};vm.task = 任务；//来自ng-repeat的任务对象$scope.hide = 函数 () {$mdDialog.hide();};$scope.cancel = 函数 () {$mdDialog.cancel();};},controllerAs: '模态',templateUrl: 'models/dialog.tmpl.php',父级:angular.element(document.body),目标事件:e});};}]);

在模态模板中，您将使用 controllerAs 符号访问任务对象，例如:

 
{{ modal.task.name }} 

I'm trying to pass a form input to my dialog (as title for example). The problem is: it don't get the form $scope.

If I set the $scope sinde the controller, it'll display normaly (see the $scope.text for example). But, if I try to get the form $scope (see `$scope.taskTitle) it just don't show anything. See my code:

JavaScript

app.controller('tasksCtrl', ['$scope', '$mdDialog',  function($scope, $mdDialog){


$scope.teste = 'Just a test, dude';

$scope.expandTask = function() {

    $mdDialog.show({
        clickOutsideToClose: true,
        controller: DialogController,
        scope: $scope,
        preserveScope: true,
        templateUrl: 'models/dialog.tmpl.php',
        locals: {
            id: $scope.tasklist.id,
            title: $scope.taskTitle
        }
    });

}

function DialogController($scope, $mdDialog, id, title) {

    $scope.id = id;
    $scope.title = title;

    $scope.hide = function() {
        $mdDialog.hide();
    };

    $scope.cancel = function() {
        $mdDialog.cancel();
      };
}
}]);

HTML

<div class="input-container float-icon" flex="100" layout="row" ng-repeat="task in tasklist">
    <md-input-container flex="100">
        <label>New Task...</label>
        <input type="text" ng-model="taskTitle" name="taskTitle">
        <md-button aria-label="Expandir Tarefa" class="md-icon-button expand-icon" ng-click="expandTask()">
            <md-tooltip hide-sm>Expand Task</md-tooltip>
            <i class="fa fa-expand"></i>
        </md-button>
    </md-input-container>

    {{taskTitle}}

</div>

解决方案

You should pass in the task object from the ng-repeat into the ng-click.

For ex ng-click="expandTask($event, task)"

and in your $mdDialog controller, you will have access to that object:

app.controller('tasksCtrl', ['$scope', '$mdDialog', function ($scope, $mdDialog) {

    $scope.expandTask = function (e, task) {
        //ng-click="expandTask($event, task)"
        $mdDialog.show({
            clickOutsideToClose: true,
            controller: function ($mdDialog) {
                var vm = this;
                vm.task = {};
                vm.task = task;  //your task object from the ng-repeat

                $scope.hide = function () {
                    $mdDialog.hide();
                };
                $scope.cancel = function () {
                    $mdDialog.cancel();
                };
            },
            controllerAs: 'modal',
            templateUrl: 'models/dialog.tmpl.php',
            parent: angular.element(document.body),
            targetEvent: e
        });
    };
}]);

And in modal template you will access the task object with controllerAs notation, for example:

 <h1> {{ modal.task.name }} <h1>

这篇关于将输入值传递给 $mdDialog的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！