Question

我正在使用$ stateProvider和这样的路由表（简化版）：

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl:'menu.html',
      controller: 'AppCtrl'
    })

    .state('app.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl:'home.html'
        }
      }
    })

  $urlRouterProvider.otherwise('/app/home');
});

此方案运行良好，但在将项目移植到另一个框架上时，通过URL加载模板不再是一个选项。因此，我必须重构我的代码，用templateUrl替换template属性。

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('app', {
      url: "/app",
      abstract: true,
      template:UiRouter.template('menu.html'), // UiRouter now provides the menu.html template content
      controller: 'AppCtrl'
    })

    .state('app.home', {
      url: "/home",
      views: {
        'menuContent' :{
          template:UiRouter.template('home.html'), // UiRouter now provides the home.html template content
        }
      }
    })

  $urlRouterProvider.otherwise('/app/home');
});

不幸的是，似乎以这种方式加载模板让我失去了范围。为了解释，我在“menu.html”中有指令，例如ion-Nav-Bar提供一个控制器（ionNavBar），在home.html模板的另一个指令中必须使用一个控制器。使用templateUrl属性效果很好，但通过模板导入似乎isolate the scope。

我应该为模板提供控制器吗？或者只是......所以我该如何扩展范围呢？

Answer 1

好的问题来自应用程序引导过早，即在我的框架准备好正确提供模板之前，因此AngularJS能够将所有内容编译在一起。

因此，我将引导从ng-app指令替换为手动指令，即

Meteor.startup(function ()
{    
  angular.bootstrap(document, ['myApp']);
});

是的，框架是流星......

AngularJS和$ stateProvider：如何在用templateUrl替换templateUrl时保留上下文？

1 个答案: