Question

我希望你能帮助我或者给我一些解决我问题的提示。

我正在使用angularjs和材料设计精简版（css和js）制作应用程序。我的问题是，一旦状态改变，材料设计js文件不会对partials产生影响，基本上我丢失了材料设计库为我提供的所有功能。

到目前为止这是我的代码的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");
})

Answer 1

您的路由代码应位于作为主模块的第一个模块中。我觉得这就是你的问题所在，我现在不在PC上能够复制你的代码和测试。但首先要改变它。

Answer 2

Angular必须知道何时查找变量的变化。如果你有非角度代码更改的东西，那么你必须告诉angular重新运行摘要周期。

这是我在Angular中包装jQuery Dialog函数的示例。我不得不手动告诉Angular WATCH和APPLY。

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

更改状态ui-router时不加载js文件

2 个答案: