Question

好吧，我试图在角度材质对话框中使用表单，但它似乎无法正常工作。

我有一个控制器专门处理对话框。

(function(){
var app = angular.module('perguntas');
app.controller("dialogController", ['$scope', '$mdDialog','$mdMedia', function($scope, $mdDialog, $mdMedia){
    $scope.status = '  ';
    $scope.customFullscreen = $mdMedia('xs') || $mdMedia('sm');

    $scope.showAdvanced = function(ev) {
        var useFullScreen = ($mdMedia('sm') || $mdMedia('xs'))  && $scope.customFullscreen;

        $mdDialog.show({
                controller: 'QuestionController',
                scope: $scope,
                template: '<md-dialog aria-label="Mango (Fruit)"  ng-cloak>'+
                '<form name="myForm" ng-submit="submit()" ng-controller="PerguntasController">'+
                '    <md-toolbar>'+
                '    <div class="md-toolbar-tools">'+
                '    <h2>New QUestion</h2>'+
                '<span flex></span>'+
                '<md-button class="md-icon-button" ng-click="cancel()">'+
                '   <md-icon class="glyphicon glyphicon-remove" aria-label="Close dialog"></md-icon>'+
                '   </md-button>'+
                '   </div>'+
                '   </md-toolbar>'+
                '   <md-dialog-content>'+
                '  <div class="md-dialog-content">'+
                '  <md-input-container>'+
                '   <label>Title</label>'+
                '<input type="text" ng-model="question.title" />'+
                ' </md-input-container>'+
                ' <md-radio-group>'+
                ' <md-radio-button value="1" ng-model="question.status">Active</md-radio-button>'+
                ' <md-radio-button value="0" ng-model="question.status">Desactivated</md-radio-button>'+
                ' </md-radio-group>'+
                '<md-button class="md-primary" ng-disabled="myForm.$invalid">SUBMIT</md-button>'+
                '</div>'+
                '</md-dialog-content>'+
                '</form>'+
                '</md-dialog>',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose:true,
                fullscreen: useFullScreen
            });
    };
}]);
function DialogController($scope, $mdDialog) {
    $scope.hide = function() {
        $mdDialog.hide();
    };

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

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

}（））

而不是QuestionController

(function(){
var app = angular.module('perguntas')
    .controller('QuestionController',['$scope', function($scope){
        $scope.pergunta = {};
        $scope.submit = function(){
            console.log(pergunta);
        };
    }]);

}（））;

和我的html结构支持mdialog。

div ng-controller="dialogController" class="dialogdemoBasicUsage" id="popupContainer" ng-cloak="">
    <md-button class="md-primary md-raised" ng-click="showAdvanced($event)">
        <label>New Question</label>
    </md-button>
</div>

当我按下提交按钮时，我无法从QuestionController中看到任何console.log。我是角色的相对新手。我做错了什么？

Answer 1

可能是因为你声明了“QuestionController”，但还没有真正定义它。这只是它出现在这里的一次：

$mdDialog.show({
                controller: 'QuestionController', // should be QuestionController without quote

这是参考，然后添加控制器功能正常。

function QuestionController() {

}

当angularJS中没有发生任何事件或响应时，主要是因为该变量不存在，或者该函数不存在，AngularJS将其保留为null，然后返回。

从对话框角度材料内的窗体未到达范围

1 个答案: