Javascript недоступен изнутри Угловой ui-view

У меня есть основной шаблон (index.html) с угловым ui-view. Внутри этого основного шаблона я импортирую кучу файлов Javascript. Я ожидаю, что эти файлы будут доступны для содержимого внутри шаблонов html, которые будут загружены внутри ui-view, но функции JS кажутся недоступными.Javascript недоступен изнутри Угловой ui-view

/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(); 
    }); 

});

/образец-приложение/приложение/приложение .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 внутри частичного шаблона, это также работает.

Что мне не хватает?

источник

2015-05-01 AlexG

Можете ли вы разместить более подробную информацию о том, что у вас есть в app.js? Я могу предположить что-то о вашем коде, которого я не должен. –

Вместо того, чтобы писать кучу jQuery для анимации, используйте ng-animate. Это упростит вашу жизнь и уменьшит часть вашего кода. – Martin

я отказался от пытаются получить JavaScript для загрузки и пользовательский интерфейс ракурс, чтобы признать это. В конечном итоге я решил это, создав угловую директиву, которая дублировала функцию JavaScript.

Директива:

angular.module('otr') 
    .directive('loginForm', loginFormDirective) 
    .directive('registerForm', registerFormDirective) 
; 

function loginFormDirective() { 
    return function(scope, element, attrs) { 

     element.bind('click', function() { 
      console.log('element: ', element[0].id); 
      console.log('attributes: ', attrs); 

      $('#' + attrs.loginForm).delay(100).fadeIn(100); 
      $("#register-form").fadeOut(100); 
      $('#register-form-link').removeClass('active'); 
      $('#' + element[0].id).addClass('active'); 
     }) 
    } 
} 

function registerFormDirective() { 
    return function(scope, element, attrs) { 

     element.bind('click', function() { 
      $('#' + attrs.registerForm).delay(100).fadeIn(100); 
      $("#login-form").fadeOut(100); 
      $('#login-form-link').removeClass('active'); 
      $('#' + element[0].id).addClass('active'); 
     }) 
    } 
}

мой взгляд теперь имеет следующий фрагмент кода:

<div class="row"> 
    <div class="col-xs-6"> 
     <a href="#" class="active" id="login-form-link" login-form="login-form">Login</a> 
    </div> 
    <div class="col-xs-6"> 
     <a href="#" id="register-form-link" register-form="register-form">Register</a> 
    </div> 
</div>

Спасибо всем, кто нашел время, чтобы прочитать мой вопрос, и писать ответы!

источник

2015-05-06 04:59:37 AlexG

Если вы хотите получить доступ к вещам вне, попробуйте создать контроллер, что-то вроде этого,

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

источник

2015-05-01 22:20:05 user86745458

Как это может решить проблему загрузки файла js –

Не видя вашу структуру проекта, трудно знать наверняка, но я подозреваю, что вам необходимо обратиться к вашим файлам javascript, используя абсолютные пути, а не относительные пути.

EG:

<script src="/app/app.js"></script>

Я говорю это потому, что большинство AngularJS проекты хранят свои взгляды в подпапке, и когда шаблон загружается относительные пути становятся недействительными, поскольку они являются относительно корня проекта /index.html, а не активный вид.

источник

2015-05-01 22:34:23 sheppe

Я просто попробовал это, но не повезло. Я пробовал полный путь, а также относительный путь. Ничего не работает. – AlexG

Вы тестируете локально или с веб-сервера? Если он локальный, вы можете сказать, что он локальный, если URL-адрес в браузере начинается с файла:, затем попробуйте поменять местами на относительные пути и убедитесь, что ваш проект структурирован таким образом, что пути действительны для индекса и представлений. Кроме того, если вы открываете консоль разработчика в своем браузере, это дает какие-либо подсказки? – sheppe

Я вернулся к использованию относительных путей. Я запускаю это на локальном сервере (т. Е. Http: // localhost: 63342/...). Консоль разработчика не жалуется ни на что и не дает мне никаких подсказок относительно того, что может быть неправильным. Если я даю ему неправильный путь для JS-файла, он жалуется, поэтому я знаю, что он находит файл. – AlexG

Предположительно, у вас есть заявление, где-то в app.js который выглядит следующим образом:

angular.module('MyApp', []);

Вам нужно будет вручную начальной загрузки приложения. Если у вас есть какие-либо ng-app= разметку в вашем HTML, удалите его - убедитесь, что app.js это самый последний сценарий, и добавьте следующие строки в конце app.js:

angular.element(document).ready(function() { 
    angular.bootstrap(document, ['MyApp']); 
});

Если вы не имеете ng-app в разметке , то вы все равно ничего не увидели бы, так как ng-app - это ключ, который говорит угловым, где он должен интегрироваться со своей страницей. И ng-app не следует применять до тех пор, пока не будут загружены все сценарии.

Но даже если бы у вас было это, оно все равно дало бы вам ошибку, чтобы директива не была определена. Причина в том, что angular.js начнет выполнение сразу после его загрузки. Но код, который вы написали, который прикрепляет директиву к вашему модулю, не получил возможности выполнить. В частности, это означает, что еще нет директивы, называемой «ui-view», определенной в вашем приложении.

Причина, по которой угловой код, похоже, работает только тогда, когда вы помещаете его в index.html, заключается в том, что угловой достаточно любезен, чтобы дождаться, когда DOM будет готов, прежде чем на самом деле попытаться подключить компоненты, а это означает, что все встроенные скрипты уже получены шанс выполнить.

Сохраните этот трюк в своей сумке, так как вы будете использовать его часто.

источник

2015-05-01 22:35:26

OP уже заявил, что представление загружается ... так почему все объяснения о 'ng-app' и самонастройке? Если OP – charlietfl

Если javascript недоступен, то он не загружен - и, скорее всего, по причинам, которые я описал. 'ui-view' почти наверняка является директивой, взятой из' angular-ui-router', поэтому он не связан с кодом OP. Но я ценю вашу озабоченность по поводу ОП. –

Я думаю, вы неправильно поняли вопрос. Да, нужен ui-roter, но как OP будет видеть просмотры, отображаемые внутри 'ui-view', если они hasn; t уже включены как зависимость? Проблема касается js, который находится в тегах скрипта внутри этих просмотров. – charlietfl

Вы должны объявить имя приложения с помощью ng-app, а затем связать контроллер с элементом в HTML. Я бы предложил this tutorial, потому что вам не хватает нескольких оснований.

Вам нужно сделать что-то вроде этого:

<!DOCTYPE html> 
<html ng-app="myapp" lang="en"> 
<head> 
    <script type="text/javascript" src="js/app.js"></script> 
</head> 
<body> 
    <div ng-controller="MyCtrl"></div> 
</body> 
</html>

app.js:

(function() { 
    var app = angular.module('myapp', []); 
    app.controller("MyCtrl", function($scope){ 
     $scope.foo = function(){}; 
     this.foo2 = function(){}; 
    }) 
})();

источник

2015-05-01 22:36:36

Я уточнил вопрос дальше. Я должен был четко указать, что у меня уже установлено приложение ng-app и контроллеры. – AlexG

Это супер поздний ответ, но я столкнулся с этой самой точной проблемой. Я решил это, включив внешние js-библиотеки, прежде чем включать Angular and Angular UI Router.

Как и в OP, мой проект состоял из index.html, а также ui-view. Частичная загрузка в ui-view должным образом, но внешние js-библиотеки не вступают в силу внутри частичного с помощью ui-view. Если содержимое из частичного файла помещено в index.html, все работает отлично.

Сценарии изменен с

<!-- AngularJS --> 
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script> 
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="dist/components.js" type="text/javascript"></script> 

<!-- Custom JS Libries --> 
<script src="dist/js/custom.js" type="text/javascript"></script>

Сценарии изменен

<!-- Custom JS Libries --> 
<script src="dist/js/custom.js" type="text/javascript"></script> 

<!-- AngularJS --> 
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script> 
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script> 
<script src="dist/components.js" type="text/javascript"></script>

Окончательный результат и рабочего

<!DOCTYPE html> 
<html dir="ltr" data-config='{"style": "calico"}'> 
<head> 
    <link rel="stylesheet" href="dist/all.css"> 
</head> 

<body ng-app="MyApp"> 

    <div ui-view></div> 

    <!-- Custom JS Libries --> 
    <script src="dist/js/custom.js" type="text/javascript"></script> 

    <!-- AngularJS --> 
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script> 
    <script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script> 
    <script src="dist/components.js" type="text/javascript"></script> 

</body> 
</html>

источник

2016-10-06 21:10:32

Вот как я его решаю.

В вашем app.js, создать на контроллере,
добавить имя контроллера в Уру индекса тело
Преобразовать в JS шаблона для метода.
затем создайте метод области видимости в вашем контроллере app.js.
В методе области видимости, вызовите метод шаблона JS
Внутри HTML шаблона UI-вида или ур панель, использование нг-инициализации для вызова метода область действия контроллера app.js с помощью

Здесь это рабочий пример:

index.html

<!DOCTYPE html> 
<!--[if lt IE 7]>  <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> 
<!--[if IE 7]>   <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9 lt-ie8"> <![endif]--> 
<!--[if IE 8]>   <html lang="en" ng-app="zeusWeb" class="no-js lt-ie9"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en" ng-app="zeusWeb" class="no-js"> <!--<![endif]--> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <title>Screening Manager</title> 
    <meta name="keywords" content="education, institution, management, portal,screening,application"> 
    <meta name="description" content="education, institution, management, portal,screening,application"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> 
    <meta name="author" content="K-Devs System Solutions"> 
    <meta name="owner" content="Kazeem Olanipekun"> 
    <meta name="verified by" content="K-Devs System Solutions"> 
    <meta name="googlebot" content="noodp"> 
    <meta name="google" content="translate"> 
    <meta name="revisit-after" content="1 month"> 
    <!-- build:css css/main.css--> 
    <!-- bower:css --> 
    <link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" /> 
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css" /> 
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
    <link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css" /> 
    <link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" /> 
    <link rel="stylesheet" href="bower_components/animate.css/animate.css" /> 
    <link rel="stylesheet" href="bower_components/iCheck/skins/flat/blue.css" /> 
    <link rel="stylesheet" href="bower_components/nprogress/nprogress.css" /> 
    <link rel="stylesheet" href="bower_components/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.css" /> 
    <link rel="stylesheet" href="bower_components/switchery/dist/switchery.css" /> 
    <!--endbower--> 
    <!--custom:css--> 
    <link href="template.css" rel="stylesheet"> 
    <link rel="stylesheet" href="app.css"> 
    <!-- endcustom css--> 
    <!-- endbuild --> 
    <link rel="shortcut icon" href="images/screening.ico" type='image/x-icon'/> 
    <link rel="icon" href="images/screening.ico" type="image/x-icon"/> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 
</head> 
<body data-ng-controller="zeusWebCtrl" class="nav-md footer_fixed"> 
    <!--[if lt IE 7]> 
     <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 

    <data ui-view ng-cloak></data> 

    <!-- build:js js/vendors.js--> 
    <!-- bower:js --> 
    <script src="bower_components/jquery/dist/jquery.js"></script> 
    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-mocks/angular-mocks.js"></script> 
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script> 
    <script src="bower_components/angular-loading-bar/build/loading-bar.js"></script> 
    <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script> 
    <script src="bower_components/moment/moment.js"></script> 
    <script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script> 
    <script src="bower_components/jquery-mousewheel/jquery.mousewheel.js"></script> 
    <script src="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.js"></script> 
    <script src="bower_components/iCheck/icheck.js"></script> 
    <script src="bower_components/nprogress/nprogress.js"></script> 
    <script src="bower_components/bootstrap-progressbar/bootstrap-progressbar.js"></script> 
    <script src="bower_components/transitionize/dist/transitionize.js"></script> 
    <script src="bower_components/fastclick/lib/fastclick.js"></script> 
    <script src="bower_components/switchery/dist/switchery.js"></script> 
    <!-- endbower --> 
    <!-- endbuild --> 


    <!-- build:js js/main.js--> 
    <!-- code inclusion--> 
    <script src="template.js"></script> 
    <script src="scripts/index.js"></script> 
    <script src="scripts/dashboard/dashboard.js"></script> 
    <script src="app.js"></script> 
    <!--end inclusion --> 
    <!-- endbuild --> 

</body> 
</html>

здесь является app.js

'use strict'; 
// Declare app level module which depends on views, and components 
var zeusWeb=angular.module('zeusWeb', ['ui.router', 'angular-loading-bar','dashboard']); 
zeusWeb.config(['$stateProvider', '$urlRouterProvider','cfpLoadingBarProvider',function ($stateProvider, $urlRouterProvider,cfpLoadingBarProvider) { 

    $urlRouterProvider.otherwise("/"); 
    /** 
    * State for the very first page of the app. This is the home page . 
    */ 
    $stateProvider.state('home', { 
    url: "/", 
    templateUrl: 'views/dashboard/dashboard.html', 
    controller: 'dashboardCtrl' 
    }); 
/* 
    $stateProvider.state('dashboard', { 
     url:'/dashboard', 
     templateUrl: 'views/dashboard/dashboard.html', 
     controller: 'dashboardCtrl', 
     controllerAs:'vm' 
    });*/ 

/* 
    $stateProvider.state('dashboard', { 
    views:{ 
     'body':{ 
     url:'/embed', 
     templateUrl: 'view1/embed.html', 
     controller: 'embed', 
     controllerAs:'vm' 
     } 
    } 
    });*/ 

}]); 
zeusWeb.controller('zeusWebCtrl',['$scope',function ($scope) { 
    $scope.test = "Testing"; 
    $scope.appTemplate=function() { 
    template(); 
    }; 

}]);

здесь является встраивать щ-View dashboard.html

<div class="container body"> 
    <div class="main_container"> 
     <!--sidebar--> 
     <section data-ng-include="'views/dashboard/sidebar-nav.html'" data-ng-controller="sideBarCtrl as vm"></section> 
     <!--sidebar--> 

     <!-- top navigation --> 
     <section data-ng-include="'views/dashboard/header.html'"></section> 
     <!-- /top navigation --> 

     <!-- page content --> 
     <div class="right_col" role="main" ui-view="body"> 
      hey 
      <!-- <script>template();</script>--> 
     </div> 
     <!-- /page content --> 
     <!--footer--> 
     <section data-ng-include="'views/dashboard/footer.html'"></section> 
     <!--footer--> 
    </div> 
</div> 
<div data-ng-init="$parent.appTemplate()"></div>

Пожалуйста, обратите внимание, что если у Вас есть асинхронный впрыснуть врезки HTML на основе ролей. убедитесь, что у вас есть hbml sidebar html по умолчанию, который поместит это instash панели управления, а также убедитесь, что боковая панель по умолчанию будет загружена последним после успешного загрузки всех других боковых панелей.

в моем случае, вот пример примера боковых панелей.

школа администратор HTML врезку

<div class="menu_section"> 
    <h3>Live On</h3> 
    <ul class="nav side-menu"> 
     <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a> 
      <ul class="nav child_menu"> 
       <li><a href="e_commerce.html">E-commerce</a></li> 
       <li><a href="projects.html">Projects</a></li> 
       <li><a href="project_detail.html">Project Detail</a></li> 
       <li><a href="contacts.html">Contacts</a></li> 
       <li><a href="profile.html">Profile</a></li> 
      </ul> 
     </li> 
     <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a> 
      <ul class="nav child_menu"> 
       <li><a href="page_403.html">403 Error</a></li> 
       <li><a href="page_404.html">404 Error</a></li> 
       <li><a href="page_500.html">500 Error</a></li> 
       <li><a href="plain_page.html">Plain Page</a></li> 
       <li><a href="login.html">Login Page</a></li> 
       <li><a href="pricing_tables.html">Pricing Tables</a></li> 
      </ul> 
     </li> 
     <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a> 
      <ul class="nav child_menu"> 
       <li><a href="#level1_1">Level One</a> 
       <li><a>Level One<span class="fa fa-chevron-down"></span></a> 
        <ul class="nav child_menu"> 
         <li class="sub_menu"><a href="level2.html">Level Two</a> 
         </li> 
         <li><a href="#level2_1">Level Two</a> 
         </li> 
         <li><a href="#level2_2">Level Two</a> 
         </li> 
        </ul> 
       </li> 
       <li><a href="#level1_2">Level One</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li> 
    </ul> 
</div>

тогда давайте предположим, что последний боковой панели пользователя, то вы затем вызвать боковую панель по умолчанию для вызова функции

по умолчанию боковая панель HTML

<div data-ng-init="$parent.appTemplate()"></div>`enter code here

источник

2016-12-11 14:47:21 Casey

Javascript недоступен изнутри Угловой ui-view

ответ

Смежные вопросы