js файлы не загружаются при изменении состояния ui-router

Надеюсь, вы можете мне помочь или дать мне подсказку, чтобы решить мою проблему.js файлы не загружаются при изменении состояния ui-router

Я делаю приложение с использованием angularjs и дизайна материалов lite (css и js). Моя проблема заключается в том, что файл js-файла материала не влияет на частичные части после изменения состояния, и в основном я потерял все функциональные возможности, предоставляемые библиотекой материалов.

это мой код до сих пор index.html

<!doctype html> 
<html ng-app="app"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Appy2go</title> 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css"> 
    <!-- Material Design Lite --> 
    <script src="dist/js/material.min.js"></script> 
    <link rel="stylesheet" href="dist/css/material.pink-blue.min.css"> 
    <!-- <script src="https://code.getmdl.io/1.2.0/material.min.js"></script> 
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> --> 
    <!-- Material Design icon font --> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 
    <script src="https://cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script> 
    <script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script> 

    <script src="app.js"></script> 
    <script src="modules/home/home.js"></script> 
    <script src="modules/signin/signin.js"></script> 

    <link rel="stylesheet" href="dist/css/style.css"> 
</head> 
<body> 
    <div id="app-wrapper" ui-view></div> 
    <!--THIS BUTTON WORKS AS SUPPOSED TO BE--> 
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 
    Button 
    </button> 
</body> 
</html>

app.js

angular.module('app',[ 
    'ui.router', 
    'app.home', 
    'app.signin' 
]) 
.config(function($urlRouterProvider){ 
    $urlRouterProvider.otherwise('/'); 
}) 
.controller('AppController',function($scope){ 
    console.log("ready"); 
})

домой модуль

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"> 
    <header class="mdl-layout__header"> 
    <div class="mdl-layout-icon"></div> <!-- IT SHOULD DISPLAY AN ICON ON SMALL DEVICES --> 
    <div class="mdl-layout__header-row"> 
     <span class="mdl-layout__title">App Name</span> 
    </div> 
    </header> 
    <div class="mdl-layout__drawer"> 
    <span class="mdl-layout__title">App Name</span> 
    <nav class="mdl-navigation"> 
     <a href="#" class="mdl-navigation__link">link 1</a> 
     <a href="#" class="mdl-navigation__link">link 2</a> 
     <a href="#" class="mdl-navigation__link">link 3</a> 
    </nav> 
    </div> 
    <main class="mdl-layout__content"> 
    <div>Content</div> 
    <!-- Colored FAB button with ripple --> 
    <!-- Accent-colored raised button with ripple --> 
    <!-- THIS BUTTON DOESN'T WORK AS SUPPOSED TO BE --> 
    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent"> 
     Button 
    </button> 
    </main> 
    <footer class="mdl-mini-footer"> 
    <div class="mdl-mini-footer__right-section"> 
     <div class="mdl-logo">Appy2go</div> 
     <ul class="mdl-mini-footer__link-list"> 
     <li><a href="#">Help</a></li> 
     <li><a href="#">Privacy & Terms</a></li> 
     </ul> 
    </div> 
    </footer> 
</div>

home.js

angular.module('app.home',[ 
    'ui.router' 
]) 
.config(function($stateProvider){ 
    $stateProvider.state('home',{ 
     url:'/', 
     controller: 'HomeController', 
     templateUrl: 'modules/home/home.html', 
    }) 
}) 
.controller('HomeController',function($scope,$http){ 
    console.log("Ready"); 
})

источник

2016-08-30 AngelSalazar

Угловой должен знать, когда искать изменения в переменных. Если у вас есть неглагорный код, который меняет, тогда вам нужно указать угловое значение для повторения цикла дайджеста.

Вот пример, где я завернул функцию jQuery Dialog в Angular. Мне нужно вручную указать «Угловое» для просмотра и применения.

app.directive("dialog", function() { 
    return { 
     restrict: 'A', 
     scope: { 
     dialog:"=", 
     }, 
     controller: function($scope) { 
     $scope.$watch("dialog", function(){ 
      if($scope.dialog){ 
      $scope.open(); 
      }else{ 
      $scope.close(); 
      } 
     }); 
     }, 
     link: { 
     pre: function(scope, element, attributes) { 
      scope.open = function() { 
      element.dialog({ 
       height: attributes.height, 
       width: attributes.width 
      }); 
      }; 
      scope.close = function() { 
      element.dialog("close"); 
      }; 
     }, 
     post: function(scope, element, attributes) { 
      scope.open(); 
      element.on("dialogclose", function(){ 
      if(scope.dialog){ 
       scope.dialog = false; 
       scope.$apply(); 
      } 
      }); 
     } 
     }, 
    }; 
    });

Остальная часть кода находится здесь. https://plnkr.co/edit/myBzYyL2BHOP8CtRpqrr?p=info

источник

2016-08-30 20:38:27 dwbartz

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

Ваш код маршрутизации должен быть в первом модуле, который является основным модулем. Я чувствую, что это ваша проблема, сейчас я не на ПК, чтобы иметь возможность копировать ваш код и тестировать. Но сначала измените это.

источник

2016-08-30 20:28:02

Я не думаю, что это проблема, но спасибо в любом случае – AngelSalazar

js файлы не загружаются при изменении состояния ui-router

ответ

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