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

问题描述

我想一个表单输入传递给我的对话框（如题为例）。现在的问题是：它没有得到形式 $范围

如果我设置了 $范围 sinde控制器，它会normaly显示（请参阅 $ scope.text 例如）。但是，如果我尝试获取表单 $范围（见`$ scope.taskTitle），它只是不显示任何内容。看到我的code：

的JavaScript

  app.controller（'tasksCtrl'，['$范围，$ mdDialog'，函数（$范围，$ mdDialog）{
$ scope.teste ='只是一个测试，纨绔子弟';$ scope.expandTask =功能（）{    $ mdDialog.show（{
        clickOutsideToClose：真实，
        控制器：DialogController，
        适用范围：$范围，
        preserveScope：真实，
        templateUrl：模型/ dialog.tmpl.php'，
        当地人：{
            ID：$ scope.tasklist.id，
            标题：$ scope.taskTitle
        }
    }）;}功能DialogController（$范围，$ mdDialog，身份证，职称）{    $ scope.id = ID;
    $ scope.title =称号;    $ scope.hide =功能（）{
        $ mdDialog.hide（）;
    };    $ scope.cancel =功能（）{
        $ mdDialog.cancel（）;
      };
}
}]）;
 

HTML

 ＆LT; D​​IV CLASS =输入容器浮动图标柔性=100布局=行NG-重复=，在任务列表任务＆GT;
    ＆LT; MD-输入容器柔性=100＆GT;
        ＆LT;标签＆gt;新建任务...＆LT; /标签＆gt;
        ＆LT;输入类型=文本NG模型=taskTitleNAME =taskTitle＆GT;
        ＆LT; MD-ARIA按钮标签=Expandir Tarefa级=MD-图标按钮展开图标NG点击=expandTask（）＆GT;
            ＆LT; MD-提示隐藏-SM＆GT;展开任务＆LT; / MD-提示＆GT;
            ＆LT; I类=发发展开＆GT;＆LT; / I＆GT;
        ＆LT; / MD-按钮＆GT;
    ＆LT; / MD-输入容器＆GT;    {{taskTitle}}＆LT; / DIV＆GT;
 

解决方案

您应该在任务通过对象从NG-重复到NG-点击。

有关前 NG-点击=expandTask（$事件，任务）

和在$ mdDialog控制器，您将有机会获得该对象：

  app.controller（'tasksCtrl'，['$范围，$ mdDialog'，函数（$范围，$ mdDialog）{    $ scope.expandTask =功能（即任务）{
        // NG-点击=expandTask（$事件，任务）
        $ mdDialog.show（{
            clickOutsideToClose：真实，
            控制器：函数（$ mdDialog）{
                VAR VM =这一点;
                vm.task = {};
                vm.task =任务; //从纳克重复你的任务目标                $ scope.hide =功能（）{
                    $ mdDialog.hide（）;
                };
                $ scope.cancel =功能（）{
                    $ mdDialog.cancel（）;
                };
            }，
            controllerAs：'模式'，
            templateUrl：模型/ dialog.tmpl.php'，
            父：angular.element（document.body的）
            targetEvent：电子
        }）;
    };
}]）;
 

和模态模板，你将与controllerAs符号访问任务的对象，例如：

 ＆LT; H1＆GT; {{modal.task.name}}＆LT; H1＆GT;
 

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屋！