2017-07-21 46 views
0

我正在为移动应用开发人员开发Cordova和Angular JS,但是我遇到了CSS类的问题,它并没有像预期的那样显示出来。
1)中的style.css文件中的CSS代码:CSS没有与AngularJS一起显示1.6.4

.nav .active { 
    border-top: 3px solid #11a7ab; } 

2)JS控制器代码NavCtrl.js(我有2个选项卡HOME约),在这里我初始化家标签:

function NavCtrl($scope){ 

    $scope.menu = 'home'; 

} 

3)的HTML代码如下:

<!DOCTYPE html> 
<html ng-app="app"> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" /> 
     <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <title>Hello World</title> 
    </head> 
    <body> 
     <header class="header"> 
      My app 
     </header> 

     <section ng-view class="view"> 
     </section> 

     <nav class="nav" ng-controller="NavCtrl"> 
      <a href="#home" ng-click="menu = 'home'" ng-class="{'active': menu=='home'}"><i class="icon-home"></i></a> 
      <a href="#about" ng-click="menu = 'about'" ng-class="{'active': menu=='about'}"><i class="icon-about"></i></a> 
     </nav> 


     </script> 
      <script src="js/jquery.js"></script> 
      <script src="js/angular-1.6.4.js"></script> 
      <script src="js/controller/NavCtrl.js"></script> 
      <script src="js/app.js"></script> 
     <script> 
    </body> 
</html> 

需要注意的是,当我使用AngularJS V1.1.5代码的工作没有任何问题,但是当我用AngularJS v1.6.4的CSS“激活”不显示起来。我错过了配置的代码与AngularJS v1.6.4正常工作的东西吗?

+0

你应该在你的NavCtrl .js之前加载你的app.js – Vivz

回答

1

你没告诉我们您的app.js但它看起来像你在官方文档看到没有注册您的控制器到您的应用程序的当前模块: angular.module('controllerAsExample', []) .controller('SettingsController1', SettingsController1);

而且还更换$范围通过这个并使用ng-controller =“YourController as vm”... {{vm.yourVar}}

查看更多面向组件架构的1.6最佳实践。我们不再依赖$ scope,而是通过类封装来处理范围变量

+0

嗨,大家好,工作就像一个魅力。谢谢Julon。您的指示帮助了我很多。我将控制器创建为app.js,现在可以很好地工作。 – mamkha

+0

如果它帮助你,请选择它作为正确答案:) –