Question

我刚刚开始使用Ionic，并且有一个HTML代码片段如下：

<!-- part of index.html -->
<body data-ng-app="myapp" data-ng-cloak>

    <ion-nav-bar class="bar-positive"></ion-nav-bar>
    <ion-nav-view></ion-nav-view>
</body>

Ionic内部的Ui-router包含<ion-nav-view></ion-nav-view>标签内所需的视图。

让我们看看我的登录视图：

<!-- partials/login.html -->

<ion-view view-title="Anmelden">
    <ion-content>
        <div class="list list-inset" data-ng-form="forms.login">
            <label class="item item-input">
              <input type="email" name="mail" data-ng-model="user.mail" placeholder="E-Mail-Adresse" required>
            </label>
            <label class="item item-input">
              <input type="password" name="password" data-ng-model="user.password" placeholder="Kennwort" required>
            </label>
            <button data-ng-click="logIn()" class="button button-full button-positive">
                Login
            </button>
            <button ui-sref="loginRegister" class="button button-full button-positive">
                Create Account
            </button>
        </div>
    </ion-content>
</ion-view>

如果登录失败，用户将被重定向到另一个视图，如：

<!-- partials/login_failed.html -->

<ion-view view-title="Login failed">
    <ion-content>
        <div class="list list-inset" data-ng-form="forms.login">
            <label class="item item-input">
              <input type="email" name="mail" data-ng-model="user.mail" placeholder="E-Mail-Adress" required>
            </label>
            <label class="item item-input">
              <input type="password" name="password" data-ng-model="user.password" placeholder="Password" required>
            </label>
            <button data-ng-click="logIn()" class="button button-full button-positive">
                Retry
            </button>
            <button data-ng-click="resetPassword()" class="button button-full button-positive">
                Reset Password
            </button>
        </div>
    </ion-content>
</ion-view>

状态和控制器定义为：

.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/')
    $stateProvider
    .state('login', {
        url: '/login',
        templateUrl: 'partials/login.html',
        controller: 'UserController'
    })
    .state('loginFailed', {
        url: '/login/failed',
        templateUrl: 'partials/login_failed.html',
        controller: 'UserController'
    })
})

.controller('UserController', ['$scope', '$state', function($scope, $state) {
    $scope.user = {};
    $scope.forms = {};

    $scope.logIn = function() {
        var user = $scope.user
        if ($scope.forms.login.$valid) {
            console.log('Form valid');
        } else {
            console.log('Form invalid');
        }
    };
    $scope.register = function() {
        var user = $scope.user
        if ($scope.forms.login.$valid) {
            console.log('Form valid');
        } else {
            console.log('Form invalid');
        }
    };
    $scope.resetPassword = function() {
        var mail = $scope.user.mail
        console.log('Reset user password', mail);
        $state.go('loginReset')

    };
}])

因此，如果登录失败，我想在所需的输入元素中显示用户的邮件地址，以提供更好的可用性，这可以通过使用相同的模型变量来完成。

但是，由于我在每个视图中都有一个ion-content元素，因此它们的范围与API docs中所述的其他元素隔离。

我试图通过将$parent.添加到data-ng-model属性来获取访问权限，该ion-view属性应该引用周围 </ion-content> {{ user.mail }} </ion-view>标记的外部范围，然后应该可以通过写

ion-content

在视图的最后。但是，情况似乎并非如此。

我很确定这个问题是由于范围继承和DOM内部范围元素的层次结构造成的。不幸的是，我不明白这一点。首先，我认为这可能是不使用双向绑定的对象表示法的问题，但我应该已经解决了这个问题。

如何从包含具有自己范围的$parent个元素的所有注入视图中访问数据模型？像$parent.$parent.这样的{{1}}元素链接似乎不适用于一般方法，并且不会产生如上所述的预期结果。

从包含离子含量的不同离子视图访问变量

0 个答案: