Question

我必须在弹出窗口中显示用户登录页面，并且必须使用角度js通过服务器验证用户名和密码。我创建了一个app模型文件，一个控制器，服务和一个指令。我的代码看起来像吼叫，

app.js

angular.module('mint', ['ngAnimate', 'toastr']);

mycontroller.js

angular.module('mint').controller(
        'headercontroller',
        [
                '$scope',
                'headerservice',
                'toastr',
                function($scope, headerservice, toastr) {
$scope.showModal = false;

                    $scope.toggleModal = function() { 
                        $scope.showModal = !$scope.showModal;
                    };
$scope.userSignin = function(){
                        $scope.userloginbtn = false;
                        if($scope.signin_form.$valid){  //Error on this line signin_form is undefine. using $valid for undefine
                            var record = {};
                            angular.extend(record, $scope.signinForm);
                            console.log(record);
                        }else {
                            $scope.signin_form.submitted = false;
                            $scope.userloginbtn = true;
                        }
                    };
} ]);

我的directive.js文件是

angular
        .module('mint')
        .directive(
                'modal',
                function() {
                    return {
                        template : '<div class="modal fade">'
                                + '<div class="modal-dialog">'
                                + '<div class="modal-content">'
                                + '<div class="modal-header">'
                                + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>'
                                + '<h4 class="modal-title"><span><i class="fa fa-user"></i> {{ title }}</span></h4>'
                                + '</div>'
                                + '<div class="modal-body" ng-transclude></div>'
                                + '</div>' + '</div>' + '</div>',
                        restrict : 'E',
                        transclude : true,
                        replace : true,
                        scope : true,
                        link : function postLink(scope, element, attrs) {
                            scope.title = attrs.title;

                            scope.$watch(attrs.visible, function(value) { 
                                if (value == true)
                                    $(element).modal('show');
                                else
                                    $(element).modal('hide');
                            });

                            $(element).on('shown.bs.modal', function() {
                                scope.$apply(function() {
                                    scope.$parent[attrs.visible] = true;
                                });
                            });

                            $(element).on('hidden.bs.modal', function() {
                                scope.$apply(function() {
                                    scope.$parent[attrs.visible] = false;
                                });
                            });
                        }
                    };
                });

我的html文件看起来像

<!DOCTYPE html>
<html lang="en" ng-app="mintmygold">
<body>
    <div class="container-fluid ban_bg"
        ng-controller="headercontroller">
        <div class="but_bg">
                    <button type="button" class="btn btn-default btn_sin" ng-click="toggleModal()">
                        <span><i class="fa fa-key"></i> Sign In</span>
                    </button>
        </div>

        <modal title="Login" visible="showModal">
                <form role="form" name="signin_form" class="signup_form" novalidate
                    ng-model="signin_form">
                    <div class="form-group">
                        <p class="infoMsg" ng-model="signinform_info">Please fill in your login credentials:</p>
                    </div>
                  <div class="form-group">
                    <label for="email">Email address</label>
                    <input ng-model="signinForm.userEmail" name="userEmail" type="email" class="form-control" id="email" placeholder="Enter email" required />
                    <div
                                ng-show="signin_form.$submitted || signin_form.userEmail.$touched">
                                <span ng-show="signin_form.userEmail.$error.required">Enter your
                                    email.</span> <span ng-show="signin_form.userEmail.$error.email">This
                                    is not a valid email.</span>
                            </div>
                  </div>
                  <div class="form-group">
                    <label for="password">Password</label>
                    <input ng-model="signinForm.userPassword" name="userPassword" type="password" class="form-control" id="password" placeholder="Password" required />
                    <div
                                ng-show="signin_form.$submitted || signin_form.userPassword.$touched">
                                <span ng-show="signin_form.userPassword.$error.required">Enter your
                                    password.</span>
                            </div>
                  </div>
                  <button ng-disabled="signin_form.$invalid || !userloginbtn" ng-model="signin" ng-click="userSignin()" type="submit" class="btn btn-primary">Submit</button>
                </form>
              </modal>
        </div></body></html>

现在我可以在点击登录按钮时显示弹出窗口。当我提交表单时，我无法从控制器中的弹出窗口中获取电子邮件和密码值的值。我使用示波器的错误是什么？请任何人帮助我。

Answer 1

快速忽略，这似乎是一个愚蠢的错误。改变你的行

这

angular.module('mint', ['ngAnimate', 'toastr']);

要

angular.module('mintmygold', ['ngAnimate', 'toastr']);

Answer 2

您正在使用scope：true表示您的指令正在创建子范围并从其父级继承属性。因此，在控制器范围内不存在您在指令范围中定义的任何属性。

更改表单名称= signin_form 对于表单名称= $ parent.signin_form或scope：false应解决问题

我没有测试过这个。而且这不是一个好的解决方案。我可能会创建一个服务来启动弹出窗口并返回一个相应的解析/拒绝的承诺。

app.js

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, modal) {
  $scope.launch = function(){
    modal.show().then(function(user){
      console.log(user)
    }, function(err){
      console.log(err)
    });  
  }


});

app.factory('modal', ["$document", "$compile", "$rootScope", "$templateCache", "$timeout", "$q",
  function ($document, $compile, $rootScope, $templateCache, $timeout, $q) {
    var $body = $document.find('body');

    return {
      show: function(){
        var defer = $q.defer(),
            child = $rootScope.$new();

        child.user = {};

        child.close = function(){
          defer.reject('canceled');
          tpl.remove();
        }

        child.submit = function(){
          defer.resolve(child.user);
          tpl.remove();
        }

        var tpl = angular.element($templateCache.get('modal.html'));
        $compile(tpl)(child);
        $body.append(tpl);

        return defer.promise;
      }
    };

}]);

的index.html

<script type="text/ng-template" id="modal.html">
    <div class="modal in" style="position: static; display: block">
      <div class="modal-dialog">
        <form ng-submit="submit()" class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" ng-click="close()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Modal title</h4>
          </div>

          <div class="modal-body">
              Email: <input ng-model="user.email"></input><br>
              Password: <input ng-model="user.password"></input>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" ng-click="close()">Close</button>
            <button type="submit" class="btn btn-primary">Sign in</button>
          </div>
        </form>
      </div>
    </div>
</script>
<button type="button" ng-click="launch()" class="btn btn-primary">Show modal</button>

Plunker

这只是一个概念证明。我认为足以让你入门。我强烈建议您查看UI Bootstrap以及实施模式的方式

指令和控制器之间的角度js范围

2 个答案: