相关疑难解决方法(0)

我已经看过这个和这个,但似乎可能有一个更简单的方法.

在我看来,我有几个菜单选项,通过权限控制 - 即,不是每个人都可以看到"仪表板"视图.所以在我的菜单选项中,我有以下内容:

<li ng-show="validatePermission('Dashboard')">Dashboard</li>

在我的控制器中,我定义了validatePermission方法,它正在查看当前用户的权限.例如:

  $scope.validatePermission = function(objectName) {
    if $scope.allPermissions......

同样在我的控制器中,我通过$ http调用加载这些权限:

  $http.get('permissions/' + userid + '.json').success(function(data) {  
    $scope.allPermissions = data;....

问题是$ scope.allPermissions在视图调用validatePermission之前没有加载.如何在视图呈现之前等待allPermissions加载？

我的问题是我需要在调用控制器并呈现模板之前加载服务. http://jsfiddle.net/g75XQ/2/

HTML:

<div ng-app="app" ng-controller="root">
    <h3>Do not render this before user has loaded</h3>            
    {{user}}
</div>
?

JavaScript的:

angular.module('app', []).
factory('user',function($timeout,$q){
    var user = {};            
    $timeout(function(){//Simulate a request
        user.name = "Jossi";
    },1000);
    return user;
}).
controller('root',function($scope,user){

    alert("Do not alert before user has loaded");
    $scope.user = user;

});
?

​

我写角度控制器的风格是这样的(使用控制器名称代替功能)

angular.module('mymodule', [
])
    .controller('myController', [
        '$scope',
        function($scope) {
            // Some code here

        }
    ]);

我现在需要的是提供i路由我想要定义解析部分:

 $routeProvider.when('/someroute', {
        templateUrl: 'partials/someroute.html', 
        resolve: myController.resolve}) // THIS IS THE CRITICAL LINE

由于控制器被定义为如何完成解决部分的名称？

为了更详细地说明,我想在解决路由之前从服务器加载一些数据,然后在控制器中使用这些数据.

更新:更确切地说,我希望每个模块都有其"解析"功能,该功能将在执行该控制器的root之前调用.这篇文章中的解决方案(由Misko Hevery回答)完全符合我的要求,但我没有控制器作为功能,而是作为名称.

我有一个带有一些标签的页面,每个标签都有大量的angularjs绑定.这是我面临问题的示例页面.每个标签大约需要10秒才能呈现.

所以我打算在制表符渲染时给出一个加载微调器.因此,我计划在单击选项卡时显示加载微调器,并$last在ng-repeat 的末尾()移除微调器.

在ng-click on标签上,我激活了旋转装载机

<ul>
    <li ng-repeat="tab in tabs" 
        ng-class="{active:isActiveTab(tab.url)}" 
        ng-click="onClickTab(tab)">{{tab.title}}
   </li>
</ul>

在控制器中

$scope.onClickTab = function (tab) {
     showLoader();
     $scope.currentTab = tab.url;
 }

为了检查ng-repeat是否完整,我使用了以下指令

.directive('onFinishRender', function ($timeout) {    
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {

                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        removeLoader();
});

showLoader和removeLoader是简单的函数,它附加和删除具有简单加载微调器的div.

function showLoader() {
    $('body').append('<div class="loader"></div>');
}

function removeLoader() {
    $('.loader').fadeOut(function () {
        $(this).remove();
    });
} …

我想延迟控制器的初始化,直到从服务器到达必要的数据.

我找到了Angular 1.0.1的解决方案:延迟AngularJS路由更改,直到加载模型以防止闪烁,但无法使用Angular 1.1.0

模板

<script type="text/ng-template" id="/editor-tpl.html">
Editor Template {{datasets}}
</script>
    <div ng-view>
</div>

​

JavaScript的

function MyCtrl($scope) {    
    $scope.datasets = "initial value";
}

MyCtrl.resolve = {
    datasets : function($q, $http, $location) {
        var deferred = $q.defer();

        //use setTimeout instead of $http.get to simulate waiting for reply from server
        setTimeout(function(){
            console.log("whatever");
            deferred.resolve("updated value");
        }, 2000);

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});?

http://jsfiddle.net/dTJ9N/1/

我有一点时间试图弄清楚为什么我在Angular中收到了未知提供程序错误.我已经检查了我能找到的关于这个问题的所有其他问题,并且大多数建议依赖注入错误.然而,在我看来,我不会忘记注入任何东西.我一直试图让这个解决方案的属性像Misko的这篇文章一样工作.我能够在解决后解决登出员工数据的问题,但随后我收到了未知提供程序错误,这会阻止数据显示在页面上.

这是我的路由器:

    "use strict";

    var app = angular.module('app',[
      'employeeServices'
    ]);

    app.config(appRouter);

    function appRouter ($routeProvider) {
      $routeProvider
        .when('/employees/:account_id', {
          controller: 'EmployeeCtrl',
          templateUrl: 'view/employee/view.html',
          resolve: employeeCtrl.resolve
        })

        .otherwise({ redirectTo: '/' });
    }

这是我的控制器

    var employeeCtrl = app.controller('EmployeeCtrl', [
      '$scope',
      'employees',
      function ($scope, employees) {
        $scope.employee = employees;
        console.log($scope.employee);
      }
    ]);

    employeeCtrl.resolve = {
      employees: function (Employee, $q, $route) {
        var deferred = $q.defer();
        console.log("current params: ", $route.current.params.account_id);
        Employee.getOne({ id: $route.current.params.account_id }, function (successData) {
          deferred.resolve(successData);
        }, function (errorData) {
          deferred.reject(errorData); …

我的configServiceAngularJS项目中只有一个通过ajax请求从服务器获取整个项目的一些配置值,即在激活帐户之前是否需要对用户进行审核.

要根据配置显示信息,应延迟整个第一页加载,直到此ajax请求完成.我的服务看起来像:

angular.module('clientApp').factory('configService', function ($http) {
    var configService = {};
    var conf = {};

    Object.defineProperty(configService, 'serverConfig', {
        get: function () {
            return conf;
        }
    });

    $http.get('/api/config').success(function (data) {
        conf = $.extend(conf, data);
    });

    return configService;
});

因此,由于服务是单例,因此只在页面加载时执行一次,而不是在每次路由更改时执行.

现在我知道如何使用$q和承诺,但我的问题是如何推迟执行所有角度,直到此服务完成其请求？我的大多数视图都需要来自configService.serverConfig特定行为的值并依赖于它 - 以异步方式执行此操作并且defered.then()在每个控制器中都有一个看起来不是最好的想法.

我只是在学习angularJS(使用angular-seed),我需要在网站的其余部分加载之前从JSON提要加载我的网站配置.

不幸的是,使用$ http或$ resource并不能及时返回应用程序的其余部分.

在应用程序的其余部分之前强制应用程序加载此数据的正确方法是什么？

从服务器加载数据时隐藏模板的更好解决方案是什么？

我的解决方案是使用$scope布尔变量isLoading和using指令ng-hide,ex:<div ng-hide='isLoading'></div>

棱角有另一种方法吗？

我需要使用ui-router插件的AngularJS专家的帮助.有些人可以提供一个plunker示例,可以在app运行之前预加载$ http数据请求吗？

我做了一些研究,但最接近的是这两个堆栈溢出:

AngularJS:如何在app加载之前加载json feed？

延迟AngularJS路由更改,直到加载模型以防止闪烁

我不到一个星期就进入angularJS,所以任何帮助都将不胜感激.