Why aren't scripts executed inside ui-view?

O

O. J2016-10-04 09:34:15

JavaScript

O. J, 2016-10-04 09:34:15

We have

<!DOCTYPE html>
<html lang="en" ng-app="app">

<div ui-view="headerLayout"></div>
<div ui-view="content"></div>
<div ui-view="footerLayout"></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>

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

</html>

app.js

/**
 * Created by root on 12.09.2016.
 */
'use strict';
var app = angular.module('app', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/");

        $stateProvider
            .state('loadApp', {
                url: '/',
                views: {
                    'headerLayout': {
                        templateUrl: 'template/layout/loadHeader.html'
                    },
                    'footerLayout': {
                        templateUrl: 'template/layout/loadFooter.html'
                    }
                }
            })
            .state('signin', {
                url: '/login',
                views: {
                    'headerLayout': {
                        templateUrl: 'template/layout/login/loginHeader.html'
                    },
                    'footerLayout': {
                        templateUrl: 'template/layout/login/loginFooter.html'
                    },
                    'content': {
                        templateUrl: 'template/layout/login/login.html'
                    }
                }
            })
            .state('clients', {
                url: '/clients',
                view: {
                    'headerLayout': {
                        templateUrl: 'template/layout/appHeader.html'
                    },
                    'footerLayout': {
                        templateUrl: 'template/layout/appFooter.html'
                    },
                    'content': {
                        templateUrl: 'template/layout/clients/clients.html'
                    }
                }
            })
            
}]);

content:

<div id="particles-js"></div>
    <form class="login-form">
      <label class="form-title">Форма входа</label>
      <input type="text" class="form-input" placeholder="Логин" id="login">
      <input type="password" class="form-input" placeholder="Пароль" id="password">
      <label for="checkbox" id="log-check-label">
      <input type="checkbox" id="remember"> Запомнить
      </label>
      <button type="submit" id="login-btn" class="btn btn-default">Войти</button>
      
    </form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
  <script src="../../js/particles/particles.js"></script>
  <script src="../../js/particles/app.js"></script>
  <script>
    console.log("hello");
  </script>

ui-router loads header, footer and content into the views.
Why js scripts are not executed inside content. Actually elementary console.log("hello"); does not work.
Although the styles are all right, the styles written inside the header are applied.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alexander Korotaev, 2016-10-04
@OrlovEvgeny

Angular strips scripts from templates because they need to be executed in a controller