相关疑难解决方法(0)

287
推荐指数
5
解决办法
26万
查看次数

角度UI-Router中的延迟加载模板和控制器

我试图在我的UI-Router router.js文件中懒惰加载控制器和模板,但是我对模板有困难.

控制器正确加载,但在加载之后,我们必须加载模板,这就是出错的地方.

在ocLazyLoad加载控制器之后,我们解析了一个Angular promise,它也包含在templateProvider中.问题是在文件加载完成后返回promise(templateDeferred.promise),而promise作为对象返回.

.state('log_in', {
    url: '/log-in',
    controller: 'controllerJsFile',
    templateProvider: function($q, $http) { 
      var templateDeferred = $q.defer();

        lazyDeferred.promise.then(function(templateUrl) {
        $http.get(templateUrl)
        .success(function(data, status, headers, config) {
            templateDeferred.resolve(data);
        }).
        error(function(data, status, headers, config) {
            templateDeferred.resolve(data);
        });
  });
  return templateDeferred.promise;
 },
 resolve: {
    load: function($templateCache, $ocLazyLoad, $q) {
        lazyDeferred = $q.defer();

        var lazyLoader = $ocLazyLoad.load ({
          files: ['src/controllerJsFile']
        }).then(function() {
          return lazyDeferred.resolve('src/htmlTemplateFile');
        });
        return lazyLoader;
    }
 },
 data: {
  public: true
 }
})
Run Code Online (Sandbox Code Playgroud)

lazy-loading requirejs angularjs angular-ui-router

13
推荐指数
1
解决办法
2万
查看次数

Angular UI Router:根据父解析对象决定子状态模板

这是我的app.js文件 - 我有一个父状态和两个子状态.两个子视图都需要该对象.

    states.push({
      name: 'parentstate',
      url: '/parent/:objId',
      abstract: true,
      templateUrl: 'views/parentview.html',
      controller: function() {},
      resolve: {
        obj: function(OBJ, $stateParams) {
          return OBJ.get($stateParams.objId);
        }
      }
    });
Run Code Online (Sandbox Code Playgroud)

我想用这个解决的obj来决定子模板

    states.push({
      name: 'parentstate.childs',
      url: '/edit',
      views: {
        "view1@parentstate": {
          templateUrl: 'views/view1',
          controller: 'view1Ctrl'
        },
        "view2@parentstate": {
          templateUrl: function(obj) {
            if (obj.something == something) {
              return "views/view2first.html";
           } else {
              return 'views/view2second.html';
            }
          },
          controller: 'view2Ctrl'
        }
      }  
    });
Run Code Online (Sandbox Code Playgroud)

我怎样才能实现这一目标?

javascript angularjs angular-ui-router

9
推荐指数
1
解决办法
4256
查看次数

Angular和UI-Router,如何设置动态templateUrl

我如何使用从我的数据库中获取的名称作为templateUrl文件名?

我试过这个:

$stateProvider.state('/', {
  url: '/',
  views: {
    page: {
      controller: 'HomeCtrl',
      templateProvider: function($templateFactory, $rootScope) {
        console.log("$rootScope.template")
        return $templateFactory.fromUrl('/templates/' + $rootScope.template);
      }
    }
  }
});
Run Code Online (Sandbox Code Playgroud)

如果我的$ rootScope.template来自数据库查询,那似乎不起作用.不知道为什么,但它不起作用.

如果在我的控制器中我做$ rootScope.template ="whatever.html"一切正常,但如果我从数据库查询模板,根本没有任何事情发生.templateProvider中的console.log("$ rootScope.template")没有给我任何东西(查询本身工作得很好).

查询是否只需要太长时间,因此它没有为路由器做好准备或者在这里发生了什么?

我做错了,我该怎么办呢?

angularjs angular-ui-router

6
推荐指数
1
解决办法
1万
查看次数

Angular UI路由器 - 动态TemplateURL

我正在构建一个带有角度UI路由器的静态HTML网站,用于导航.我基本上有一个带有多个(10+)html模板(页面)的ui-view加载到该视图中.我的所有模板页面都在一个名为"pages"的目录中.

所以我基本上想知道我们是否只能在$ stateProvider中定义一个状态来动态分配多个模板网址,而不是为每个HTML模板页面编写不同的状态(如下所述).

$stateProvider
.state('home', {
    url: '/home',
    templateUrl: 'pages/home.html',
    controller: 'homeController',
    controllerAs: 'home'
})
.state('viz', {
    url: '/viz',
    templateUrl: 'pages/viz.html',
    controller: 'vizController',
    controllerAs: 'viz'
})
.state('about', {
    url: '/about',
    templateUrl: 'pages/about.html',
    controller: 'aboutController',
    controllerAs: 'about'
})....
Run Code Online (Sandbox Code Playgroud)

任何帮助深表感谢.

state angularjs angular-ui-router

3
推荐指数
1
解决办法
4671
查看次数