Question

我跟随this guide在我的Angular应用中实施身份验证，而且我无法访问控制器内的模型。

在我的应用程序的某处，我打开模态窗口，如下所示：

loginModal().then(function() {
    // Successful login, proceed to the page the user wants
    return $state.go(toState.name, toParams);
}).catch(function() {
    // Login failed, return home
    return $state.go('home');
});

loginModal()是一项服务，如下所示：

myApp.service('loginModal', function($modal, $localStorage) {
    function assignCurrentUser(user) {
        $localStorage.user = user;
        return user;
    }

    return function() {
        var instance = $modal.open({
            templateUrl: '/partials/modals/login.html',
            controller: 'LoginController',
            windowClass: 'small'
        });

        return instance.result.then(assignCurrentUser);
    };
});

当使用loginModal()服务时，它会在页面上打开一个包含/partials/modals/login.html文件的HTML的模式窗口。一切都很完美。您会注意到我还指定了要在模式中使用的控制器：LoginController。

LoginController的编写如下：

myApp.controller('LoginController', function($scope) {
    $scope.login = function() {
        console.log($scope.user);
    };
});

，最后，在模态窗口中使用的部分：

<form name="loginForm" novalidate method="post" ng-submit="login();">
    <label>Email address
        <input type="email" name="email" ng-model="user.email">
    </label>
    <label>Password
        <input type="password" name="password" ng-model="user.password">
    </label>
    <input type="submit" value="Login">
</form>

问题在于，当我填写表单时（通过填充user.email和user.password）并点击提交按钮，我会将undefined打印到控制台。

基本上，我的$scope.login中的LoginController函数确实已执行，但$scope.user属性未定义，即使它应该由模态窗口中的表单填充（使用时） ng-model s）。

另外，如果我将{{user.email}}放入模态模板然后填充电子邮件字段，则会打印出来。所以我知道双向数据绑定有效。

为什么我无法从控制器内的模态窗口访问$scope值？

Answer 1

如果有帮助的话，不要现在，但我在路由方面遇到了这样的问题。解决方案是使用ng-model="$parent.user.name"添加$parent到控制器中的依赖项列表，并使用$scope.$parent.user.email调用它或者只是$scope.user.email有时候它会起作用。希望帮助了你。

角度$范围在模态窗口内不起作用

1 个答案: