0

我正在使用 Angular.js 构建一个简单的网页。在浏览器（Chrome）中打开网页时，页面以原始角度表达式呈现，如下所示 使用原始 Angular 表达式呈现的页面

在重新加载页面（有时 2 - 3 次）时，Angular 表达式被评估并正确呈现，如下所示

页面正确呈现

当两种情况中的任何一种发生时，都没有特定的模式。可能的原因是什么？

控制器文件

(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

0

这通常是由于某些错误导致角度无法正确加载而发生的。因为页面偶尔会正确加载，我会假设您的业务逻辑在您如何连接事物方面可能是正确的。您可以尝试检查一些依赖项以确保它们正确加载。如果您从另一个域加载资源并且由于某种原因无法加载，则可能会导致导致角度加载失败的问题。

于 2015-12-28T17:12:35.767 回答