Javascript 角度UI路由器抽象父状态解析数据_Javascript_Angularjs_Templates_Angular Ui Router

Javascript 角度UI路由器抽象父状态解析数据

javascript angularjs templates

Javascript 角度UI路由器抽象父状态解析数据,javascript,angularjs,templates,angular-ui-router,Javascript,Angularjs,Templates,Angular Ui Router,我有以下ui路由器状态配置： angular .module('my_app', ['ui.router']) .config(function($stateProvider, $urlRouterProvider, $locationProvider){ $urlRouterProvider.otherwise('/'); $stateProvider .state('main', { abstract: true, views: {

我有以下

ui路由器

状态配置：

angular
.module('my_app', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider, $locationProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('main', {
        abstract: true,
        views: {
            "header": {
                templateUrl: "app/views/shared/header.html",
                controller: "MainController",
                controllerAs: "main"
            },
            "content": {
                template: "<ui-view />"
            }
        },
        resolve: {
            mobile: mobileCheck
        }
    })
    .state('main.home', {
        url: '/',
        templateUrl: 'app/views/templates/home.html',
        controller: 'HomeController',
        controllerAs: 'home',
    })
    .state('main.earn', {
        url: '/earn',
        templateUrl: 'app/views/templates/earn.html',
        controller: "EarnController",
        controllerAs: 'earn',
    })
    .state('main.vision', {
        url: '/vision',
        templateUrl: 'app/views/templates/vision.html',
        controller: "VisionController",
        controllerAs: "vision"
    })
    .state('main.contact', {
        url: '/contact',
        templateUrl: 'app/views/templates/contact.html',
        controller: "ContactController",
        controllerAs: "contact"
    })
});

其中对应的html如下所示：

<body ng-controller="MainController as main" ng-cloak>
    <div ui-view='header'></div>
    <div ui-view='content'></div>

    <script src="app/app.js"></script>

    <!-- AngularJS Controllers -->
    <script src="app/controllers/mainController.js"></script>
    <script src="app/controllers/homeController.js"></script>
    <script src="app/controllers/earnController.js"></script>
</body>

标题

命名视图是插入标题的位置，

内容

视图保存每个页面模板

如您所见，我已经在整个文档的主体上定义了主控制器，并为特定页面模板提供了控制器别名，因此我应该能够访问我能够确认有效的任何页面模板中的

home

和

main

但是，不起作用的是访问主控制器内的已解析数据。我可以访问每个页面模板内部，但不能访问主“父”控制器。每个页面控制器都会通过

mobile

依赖项，然后可以附加到

this

，该依赖项用于检测移动/桌面环境。我更希望能够在

MainController

中接收

mobile

依赖项，但每当我尝试

.controller（'MainController'，function（mobile）

，我都会得到关于不正确依赖项注入的标准角度误差

这让我相信解析数据会被解析到子状态（和控制器）而不是父控制器。我认为这是因为1）父抽象状态没有

url

，2）因为该状态的控制器是在主体上命名的，而不是在状态本身上

如何将解析的数据作为依赖项解析到主控制器中？我尝试在状态配置中命名控制器，但没有效果。

我在发布问题后不久就解决了问题，但我想我还是应该发布我的发现/答案

概括一下我的目标是：

组合命名和非命名的

ui视图

标记

将数据解析到父控制器和所有子状态

在子控制器的html模板中访问父控制器和子控制器

我将介绍如何解决从1到3的每一个问题，所有这些都与如何将数据解析为抽象状态及其子级的更大问题有关

首先，看看我的身体标签：

<body ng-controller="MainController as main" ng-cloak>

在状态配置中：

.state('main', {
    abstract: true,
    views: {
        "header": {
            templateUrl: "app/views/shared/header.html",
            controller: "MainController",
            controllerAs: "main"
        },
        "content": {
            template: "<ui-view />"
        }
    },
    resolve: {
        mobile: mobileCheck
    }
})

也不行

然后，简单的技巧是在所有子视图上定义主控制器：

views: {
    "header": {
        templateUrl: "app/views/shared/header.html",
        controller: "MainController",
        controllerAs: "main"
    },
    "content": {
        template: "<ui-view />",
        controller: "MainController",
        controllerAs: "main"
    }
}

视图：{
“标题”：{
templateUrl:“app/views/shared/header.html”，
控制器：“主控制器”，
控制器：“主”
},
“内容”：{
模板：“”，
控制器：“主控制器”，
控制器：“主”
}
}

现在，共享视图可以访问父控制器，而子模板可以访问两个控制器。因此，您可以在父控制器上定义公共状态，例如如果环境是移动的，而不是在每个子控制器上定义它

注:

因为主控制器在两个地方定义，所以主控制器被实例化两次。您可以通过提供某种服务或其他方式来解决此问题，并为父控制器提供一个共享变量

发布问题后不久，我解决了问题，但我想我还是应该发布我的发现/答案

概括一下我的目标是：

组合命名和非命名的

ui视图

标记

将数据解析到父控制器和所有子状态

在子控制器的html模板中访问父控制器和子控制器

我将介绍如何解决从1到3的每一个问题，所有这些都与如何将数据解析为抽象状态及其子级的更大问题有关

首先，看看我的身体标签：

<body ng-controller="MainController as main" ng-cloak>

在状态配置中：

.state('main', {
    abstract: true,
    views: {
        "header": {
            templateUrl: "app/views/shared/header.html",
            controller: "MainController",
            controllerAs: "main"
        },
        "content": {
            template: "<ui-view />"
        }
    },
    resolve: {
        mobile: mobileCheck
    }
})

也不行

然后，简单的技巧是在所有子视图上定义主控制器：

views: {
    "header": {
        templateUrl: "app/views/shared/header.html",
        controller: "MainController",
        controllerAs: "main"
    },
    "content": {
        template: "<ui-view />",
        controller: "MainController",
        controllerAs: "main"
    }
}

视图：{
“标题”：{
templateUrl:“app/views/shared/header.html”，
控制器：“主控制器”，
控制器：“主”
},
“内容”：{
模板：“”，
控制器：“主控制器”，
控制器：“主”
}
}

注:

因为主控制器在两个地方定义，所以主控制器被实例化两次。您可以通过提供某种服务或其他东西并为父控制器提供共享变量来解决此问题

也许您可以使用您的

mobileCheck

来提供服务或

提供商

，这样您就不必为您的州解决它了？考虑

.provider('mobileCheck', function mobileCheck() {
  this.$get = function() {
    return {
      isMobile: function() {
        return true;
      }
    };
  };
})

.controller('MainController', function(mobileCheck) {
  var main = this;
  main.isMobile = mobileCheck.isMobile();
})

.config(function($stateProvider) {
  $stateProvider
    .state('main', {
      abstract: true,
      views: { 
        'header': {
          template: '<div>abstract state : main (isMobile {{ main.isMobile  }})</div>',
          controller: 'MainController',
          controllerAs: 'main'
        },
        'content': {
          template: '<ui-view />'
        }
      }
    })
    .state('main.home', {
      url: '/',
      template: '<div>concrete state : home  (isMobile {{ main.isMobile  }})</div>',
      controller: angular.noop
    });
});

.provider（'mobileCheck'，函数mobileCheck（）{
这是。$get=function（）{
返回{
isMobile:function（）{
返回true；
}
};
};
})
.controller（'MainController'，函数（mobileCheck）{
var main=这个；
main.isMobile=mobileCheck.isMobile（）；
})
.config（函数（$stateProvider）{
$stateProvider
.州（'main'{
摘要：没错，
视图：{
“标题”：{
模板：“抽象状态：main（isMobile{{main.isMobile}}）”，
控制器：“主控制器”，
控制器：“主”
},
“内容”：{
模板：“”
}
}
})
.state（'main.home'{
url:“/”，
模板：“具体状态：home（isMobile{{main.isMobile}}）”，
控制器：angular.noop
});
});

与HTML模板一样

<body ng-controller="MainController as main" ng-cloak>
  <div ui-view="header"></div>
  <div ui-view="content"></div>
  <hr>
  <div>
    <a ui-sref="main.home">main.home</a>
  </div>
</body>



也许你可以用你的mobileCheck
提供服务或提供商，这样你就不必为你解决问题了