Question

我一直在努力将 ng-view 和材料js 用于我的应用程序的子视图。

材料js 无法在子视图上使用，因为它适用于主页。

var eSepration = angular.module('eSeparation', ['ngRoute','ngMaterial','ngAnimate','ngMessages','ngAria']);
 
eSepration .config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/myApproval', {
        templateUrl: 'app/components/view/my_approval.html',
        controller: 'app/components/controllers/MyApproval'
      }).
      when('/separationProcess', {
        templateUrl: 'app/components/view/separation_process.html',
        controller: 'app/components/controllers/SeparationProcess'
      }).
        when('/fareTheWell', {
        templateUrl: 'app/components/view/fare_the_well.html',
        controller: 'app/components/controllers/FareTheWell12'
      }).
        when('/test', {
        templateUrl: 'app/components/view/test.html',
        controller: 'app/components/controllers/mainController'
      }).
      otherwise({
        redirectTo: '/myApproval'
      });
  }]);

<html >
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="shortcut icon" href="http://www.timesinternet.in/icons/favicon.ico" type="image/x-icon">
	<link rel="icon" href="http://www.timesinternet.in/icons/favicon.ico" type="image/x-icon">
	<title>empower separation</title>


    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">  
	<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
	<link href="assets/css/bootstrap.min.css" rel="stylesheet">
	<link href="assets/css/empower_separation.css" rel="stylesheet">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">

</head>
<body ng-app="eSeparation" ng-cloak>
<md-input-container class="md-block" flex-gt-sm>
            <label>First name</label>
            <input ng-model="user.firstName">
          </md-input-container>
<md-button class="md-raised md-primary">Primary</md-button>
	<header>
		<div class="logo"><a  href="index.html"><img src="assets/img/logo.png" alt="empower separation" width="200"></a>
			<div type="button" id="pollSlider-button" class="navbar_icon" data-toggle="collapse" data-target=".navbar-ex1-collapse" onclick="moving_Image()"><span class="icon-bar"><img src="assets/img/menu_ico.png" alt=""/></span>  </div>
		</div>
	</header>

<div class="container">
	<div class="sections">
		<div class="row">
			<div class="col-md-2 col-xs-12 col-sm-3">
				<div class="sideholder">
					<nav class="mynav">
						<ul>
							<li class="current"><a href="#myApproval"> MY APPROVALS
							</a></li>
							<li> <a href="#">INVOLUNTARY <span class="glyphicon glyphicon-menu-right" aria-hidden="true" style="font-size:10px; padding:4px;"></span> </a>
								<ul>
									<li> <a href="#">Mission Statement </a></li>
									<li> <a href="#">Our Staff </a></li>
									<li> <a href="#">Our Promise </a></li>
									<li> <a href="#">Ethics &amp; Legal </a></li>
									<li> <a href="#">Future Goals </a></li>
								</ul>
							</li>
							<li> <a href="#separationProcess">INITATE </a></li>
							<li> <a href="#fareTheWell">Fare Well </a></li>
							<li> <a href="#">Demo </a></li>

						</ul>
					</nav>
				</div>
			</div>

			<div ng-view> 

			</div>


		</div>
	</div>
</div>




<script type="text/javascript" src="assets/js/company-main30f4.js?v=3"></script>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- Angular Material Dependencies -->

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="app/app.routes.js"></script>
</body>
</html>

<md-button class="md-raised md-primary">Primary</md-button>


<div class="col-md-8 col-xs-12 col-sm-6" ng-controller="AppCtrl">
<div class="my_container">
<div class="heading">Do you feel like moving?
</div>

<div>
<form class="bs-example bs-example-form">

<div class=" form_container">


<div class="field">
<label class="small">Let’s try to work something out
</label>
<div class="clearfix"></div>
<div class="col-md-9 col-md-push-2 col-xs-12">
<div class="styled-select slate">
  <select>
    <option>Talk To</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>
</div>
</div>

<div class="field">
<div class="col-md-9 col-md-push-2 col-xs-12">
<div class="styled-select slate">
  <select>
    <option>Write To</option>
    <option>The second option</option>
    <option>The third option</option>
  </select>
</div>
</div>
</div>

<div class="field" >
   
</div>




</div>

</form>
</div>



</div>
</div>

Answer 1

下载arri.js并在material.js之前加入

https://raw.githubusercontent.com/uzairfarooq/arrive/master/minified/arrive.min.js

对我有用。

材料JS不在ng-view上工作但在主文件上工作

1 个答案: