Question

我有像这样的HTML

<body ng-app="app" ng-controller="IndexCtrl" id="indexBody">
        <h1>test</h1>
  </body>

然后在像这样的javascript函数中我得到像这样的范围

function myFx() {
        var element = document.getElementById('indexBody');
        var scope = angular.element(element).scope();
        console.log(scope);
        scope.go('login');
}

这会在控制台中记录范围，但后来出现错误

cordova.js:314 Uncaught TypeError: scope.go is not a function

如何在此javascript函数中使用angular进入新页面？

由于

Answer 1

您使用的是ui-router吗？如果是这样，您可以在控制器中使用$state.go('destination');，但请记住在控制器功能中注入$state。

Answer 2

You will need to use a ui-router to get to different pages.
You will need to use your Contoller file to direct your user using
click events to navigate to various pages. This is where you will use
the 'scope.go('login')'. Refer to example below.


//------------------------------------------------------------------------------------
# authentication.config.js
# This is your ui-router and use this to go to different pages on your App
# app.foo.authentication refers to your folder stucture i.e.
# app/foo/authentication/authentication.config.js

(function() {
    'use strict';

    angular
        .module('app.foo.authentication')
        .config(moduleConfig);

    /* @ngInject */
    function moduleConfig($translatePartialLoaderProvider, $stateProvider) {
        $translatePartialLoaderProvider.addPart('app/foo/authentication');

        $stateProvider
        .state('authentication.login', {
            url: '/login',
            templateUrl: 'app/foo/authentication/login/login.tmpl.html',
            controller: 'LoginController',
            controllerAs: 'vm'
        })
        .state('authentication.logout', {
            url: '/logout',
            templateUrl: 'app/foo/authentication/logout/logout.tmpl.html',
            controller: 'LogoutController',
            controllerAs: 'vm'
        });
    }
})();

//------------------------------------------------------------------------------------
# logout.controller.js
# This is how you will navigate from the 'Logout' page to the 'Login' page.
# app.foo.authentication refers to your folder stucture i.e.
# app/foo/authentication/logout.controller.js

(function() {
    'use strict';

    angular
        .module('app.foo.authentication')
        .controller('LogoutController', LogoutController);

    /* @ngInject */
    function LogoutController(
        $scope,
        $state,
        $mdToast,
        $filter,
        $http,
        $window,
        triSettings,
        session) {
        var vm = this;
        vm.triSettings = triSettings;
        vm.backToLogin = backToLogin;
        vm.loading = false;

        function backToLogin () {
            vm.loading = true;
            session.end();
            $window.location.reload();
            $state.go('authentication.login');
        }
    }
})();

//------------------------------------------------------------------------------------
# logout.tmpl.html
# This is how you will navigate from the 'Logout' page to the 'Login' page.
# app.foo.authentication refers to your folder stucture i.e.
# app/foo/authentication/logout.tmpl.html

<div layout="row" flex layout-padding layout-fill layout-align="center center">
    <div class="logout-card" flex="40" flex-lg="50" flex-md="70" flex-xs="100">
        <md-card>
            <md-toolbar class="padding-20 logout-card-header">
                <div layout="row" layout-align="center center">
                    <img ng-src="{{::vm.triSettings.logo}}" alt="{{vm.triSettings.name}}">
                </div>
                <div layout="row" layout-align="center center">
                    <h1 class="md-headline" translate>LOGOUT.TITLE</h1>
                </div>
            </md-toolbar>

            <md-content class="md-padding">
                <p translate>LOGOUT.MESSAGES.SUCCESS</p>

                <div layout="row" layout-align="center center">
                    <md-progress-circular ng-show="vm.loading" md-mode="indeterminate"></md-progress-circular>
                </div>

                <form name="logout">
                    <md-button
                        class="md-raised md-primary full-width margin-left-0 margin-right-0 margin-top-10 margin-bottom-10"
                        ng-click="vm.backToLogin()"
                        translate="LOGOUT.MESSAGES.LOGIN_NOW"
                        aria-label="{{'LOGOUT.MESSAGES.LOGIN_NOW' | translate}}">
                    </md-button>
                </form>
            </md-content>
        </md-card>
    </div>
</div>

//------------------------------------------------------------------------------------

在JavaScript函数中使用$ scope.go（）

2 个答案: