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 heder, footer and content into views. Why inside content js scripts are not executed. Actually elementary console.log ("hello"); does not work. Although the styles are fine, the styles specified in the header apply.

    1 answer 1

    AngularJs does not execute scripts within templates. This is done for several reasons, it improves the security and architecture of the application. You need to come up with another way to add logic (using directives or other components).

    • Thank you very much for the answer. I solved the problem by bringing the js code I needed to the factory and calling it in the content controller. - Christian Lisov
    • @ChristianLisov you could not give an example of how to solve the issue? - Bookin