无法从Angular ui-view中访问Javascript

发布时间：2020-12-17 18:04:12 所属栏目：安全来源：网络整理

导读：我有一个带有Angular ui-view的主模板(index.html).在这个主模板中,我导入了一堆 Javascript文件.我希望这些文件可用于将在ui-view中加载的html模板内的内容,但JS函数似乎无法访问. /sample-app/index.html： html ng-app="otr"head/headbody div ui-view/di

我有一个带有Angular ui-view的主模板(index.html).在这个主模板中,我导入了一堆 Javascript文件.我希望这些文件可用于将在ui-view中加载的html模板内的内容,但JS函数似乎无法访问.

/sample-app/index.html：

<html ng-app="otr">
<head></head>
<body>
    <div ui-view></div>

    <!-- JS imports -->
    <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <!-- Angular Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular-route.min.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular-cookies.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>

    <!-- Custom scripts -->
    <script src="/sample-app/js/login.js"></script>

    <!-- Angular app scripts -->
    <script src="app/app.js"></script>
    <script src="app/services/authentication.service.js"></script>
    <script src="app/services/flash.service.js"></script>
    <script src="app/common/cases-model.js"></script>

    <script src="app/home/home.controller.js"></script>
    <script src="app/login/login.controller.js"></script>
    <script src="app/register/register.controller.js"></script>        

</body>
</html>

/sample-app/js/login.js

$(function() {

    $('#login-form-link').click(function(e) {
        $("#login-form").delay(100).fadeIn(100);
        $("#register-form").fadeOut(100);
        $('#register-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
    $('#register-form-link').click(function(e) {
        console.log('Inside login.js REGISTER');
        $("#register-form").delay(100).fadeIn(100);
        $("#login-form").fadeOut(100);
        $('#login-form-link').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });

});

/sample-app/app/app.js：

(function () {
    'use strict';

    angular.module('otr',[
        'ngRoute','ngCookies','ui.router',])
        .config(config)
        .run(run);

    function config($stateProvider,$urlRouterProvider,$httpProvider) {

        $stateProvider
            .state('otr',{
                url: '',abstract: true
            })
            .state('login',{
                url: '/login',controller: 'LoginController as vm',templateUrl: 'app/login/login.view.html'
            })
            .state('register',{
                url: '/register',controller: 'RegisterController as vm',templateUrl: 'app/register/register.view.html'
            })
            .state('home',{
                url: '/',controller: 'HomeController as vm',templateUrl: 'pages/home2.view.html'
            })
        ;

        $urlRouterProvider.otherwise('/login');
        $httpProvider.defaults.withCredentials = true;
    }

    function run($rootScope,$location,$cookies,$http) {
        // keep user logged in after page refresh
        $rootScope.globals = $cookies.get('globals') || {};

        $rootScope.$on('$locationChangeStart',function (event,next,current) {
            // redirect to login page if not logged in and trying to access a restricted page
            var restrictedPage = $.inArray($location.path(),['/login','/register']) === -1;
            var loggedIn = $rootScope.globals.currentUser;
            if (restrictedPage && !loggedIn) {
                $location.path('/login');
            }
        });
    }

})();

> ui-view内容加载得很好,但没有调用JS函数.
>如果我将内容直接复制/粘贴到index.html中,一切都按预期工作
>如果我将JS导入放在部分模板中,那也可以.

我错过了什么？

解决方法

如果你想访问外面的东西,试着创建一个这样的控制器,

<body>
    <div ng-controller="MainCtrl">
      <div ui-view></div>
      <script src="app/app.js"></script>
    </div>
</body>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!