0

Angular.js を使用して簡単な Web ページを作成しています。ブラウザー (Chrome) で Web ページを開くと、ページは以下のような raw angular 表現でレンダリングされます。 生の Angular Expressions でレンダリングされたページ

ページをリロードすると (場合によっては 2 ～ 3 回)、Angular 式が評価され、以下のように適切にレンダリングされます。

適切にレンダリングされたページ

2 つのシナリオのいずれかが発生する特定のパターンはありません。考えられる理由は何ですか？

コントローラーファイル

(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>
4

1 に答える 1