发表于： 2017-07-11 23:09:04
1 950
今天完成的事情：
写了几个页面的样式，因为实在太丑了，无法直视，然后把首页的模态框弄了下，这里要吐糟下ui.bootstrap的模态框太难用了，早知道用bootbox了。
学习 ui-router - 管理状态
激活状态
有三种方法来激活状态：
调用$state.go()方法，这是一个高级的便利方法；
点击包含ui-sref指令的链接；
导航到与状态相关联的 url
Templates 模板
可以通过下面几种方法来配置一个状态的模板。
方法一：配置template属性，指定一段 HTML 字符串，这人是设置模板的最简单的方式
$stateProvider.state('contacts', {
template: '<h1>My Contacts</h1>'
})
方法二：配置templateUrl属性，来加载指定位置的模板，这是设置模板的常用方法。
$stateProvider.state('contacts', {
templateUrl: 'contacts.html'
})
templateUrl的值也可以是一个函数返回的url，函数带一个预设参数stateParams。
$stateProvider.state('contacts', {
templateUrl: function (stateParams){
return '/partials/contacts.' + stateParams.filterBy + '.html';
}
})
方法三：通过templateProvider函数返回模板的 HTML。
$stateProvider.state('contacts', {
templateProvider: function ($timeout, $stateParams) {
return $timeout(function () {
return '<h1>' + $stateParams.contactId + '</h1>'
}, 100);
}
})
如果想在状态被激活前，让<ui-view>有一些默认的内容，当状态被激活之后默认内容将被状态对应的模板替换。
<body>
<ui-view>
<i>Some content will load here!</i>
</ui-view>
</body>
Controllers 控制器
可以为模板指定一个控制器（controller）。警告：控制器不会被实例化如果模板没有定义。
设置控制器：
$stateProvider.state('contacts', {
template: '<h1>{{title}}</h1>',
controller: function($scope){
$scope.title = 'My Contacts';
}
})
如果在模块中已经定义了一个控制器，只需要指定控制器的名称即可：
$stateProvider.state('contacts', {
template: ...,
controller: 'ContactsCtrl'
})
使用controllerAs语法:
$stateProvider.state('contacts', {
template: ...,
controller: 'ContactsCtrl as contact'
})
对于更高级的需要，可以使用controllerProvider来动态返回一个控制器函数或字符串：
$stateProvider.state('contacts', {
template: ...,
controllerProvider: function($stateParams) {
var ctrlName = $stateParams.type + "Controller";
return ctrlName;
}
})
明天计划的事情：
开始推荐职位页面的编写
遇到的问题：
暂无
收获：
ui.bootstrap的模态框用法
返回列表
评论