2015-12-28 4 views
0

Я строю простую веб-страницу, используя Angular.js. При открытии веб-страницы в браузере (Chrome) страница отображается в сырых угловых выражений, как показано ниже Page rendered with raw Angular ExpressionsУгловое выражение, отображаемое в необработанном формате, иногда

На перегрузочный страницу (иногда 2 - 3 раза) Угловая выражение вычисляется и оказанными надлежащим образом, как показано ниже

Page rendered properly

Не существует определенного шаблона при возникновении любого из двух сценариев. Какова могла быть возможная причина?

Controller File

(function(){ 
    var userRole = angular.module('userRoleController', []); 

    userRole.controller('userRoleDisplayController', function(){ 
     this.userRoles = userRolesList; 
     this.selectedRole = 0; 
     this.selectRole = function(roleID){ 
      this.selectedRole = roleID; 
     }; 
     this.isSelectedRole = function(roleID){ 
      console.log(roleID); 
      console.log(this.selectedRole === 0 ? true : this.selectedRole === roleID); 
      return this.selectedRole === 0 ? true : this.selectedRole === roleID; 
     }; 
     this.showRoleExpander = function(){ 
      return this.selectedRole 
     }; 
     this.expandAllRoles = function(){ 
      this.selectedRole = 0; 
     }; 
    }); 

    userRole.directive('userLogin', function(){ 
     return{ 
      restrict: 'E', 
      templateUrl: '../../views/template/login.html' 

     }; 
    }); 

    var userRolesList = [ 
    { 
     role_id: 1, 
     role_type: 'Student' 
    }, 
    { 
     role_id: 2, 
     role_type: 'Admin' 
    }]; 
})(); 

index.js файл

(function(){ 
    var home = angular.module('home', ['userRoleController']); 
})(); 

HTML файл

<body ng-app='home'> 
    <header> 
    </header> 
    <aside class='users' ng-controller='userRoleDisplayController as roleDispCtrl'> 
     <ul> 
      <li class='roles' ng-repeat='userRole in roleDispCtrl.userRoles' ng-show='roleDispCtrl.isSelectedRole(userRole.role_id)' 
      ng-click='roleDispCtrl.selectRole(userRole.role_id)'> 
       {{userRole.role_type}}    
      </li> 
      <li ng-show="roleDispCtrl.showRoleExpander()"> 
       <user-login> 
       </user-login> 
      </li> 
      <li class="roleExpander" ng-show="roleDispCtrl.showRoleExpander()" ng-click="roleDispCtrl.expandAllRoles()"> 
      </li> 
     </ul>  
    </aside> 
    <main>   
    </main> 
    <script charset="utf-8" async defer src="../scripts/JS Frameworks/angular.min.js"></script> 
    <script charset="utf-8" async defer src="../scripts/index.js"></script> 
    <script charset="utf-8" async defer src="../scripts/controllers/userRoleController.js"></script> 
</body> 
+0

Проверьте, есть ли какая-либо ошибка в консоли, когда ее отображающее выражение в необработанном формате –

+0

спасибо manoj. Получил эту ошибку в консоли -> Не удалось создать экземпляр модуля дома из-за: Ошибка: [$ injector: nomod] http://errors.angularjs.org/1.4.8/$injector/nomod?p0=home at Ошибка (родной) – Navaneeth

+0

Я новичок в работе с Angular. Можете ли вы объяснить, что могло бы вызвать это? – Navaneeth

ответ

0

Часто это происходит в результате какой-то ошибки, которая вызывает угловое не лоа d надлежащим образом. Поскольку страница изредка загружается правильно, я бы предположил, что ваша бизнес-логика, вероятно, правильна с точки зрения того, как вы подключались. Вы можете попробовать проверить некоторые из ваших зависимостей, чтобы убедиться, что они правильно загружаются. Если вы загружаете ресурс из другого домена, и по какой-либо причине он не загружается, это может вызвать проблемы, которые приводят к угловому сбою загрузки.

+0

Я не загружаю ничего из других источников. У меня есть этот html + файл css и файлы Angular, разделенные на index.js и controller.js. Отображаемые данные представляют собой массив объектов JS, которые жестко закодированы в файле контроллера – Navaneeth

+0

, было бы легче определить проблему, если бы вы могли опубликовать этот код. –

+0

Я разместил код .. Спасибо – Navaneeth