angular的uiRouter服务学习(5) --- $state.includes()方法

$state.includes方法用于判断当前激活状态是否是指定的状态或者是指定状态的子状态.

$state.includes(stateOrName,params,options)

$state.includes方法接受三个参数,其中第二和第三个都不知道是干啥的...估计也不太用得到,就暂时不管了...

stateOrName:字符串(必填). 是一个状态的名字.

比如当前的激活状态是 "contacts.details.item"

如下调用:

$state.includes("contacts");                              //返回true
$state.includes("contacts.details");                      //返回true
$state.includes("contacts.details.item");                 //返回true
$state.includes("detail");                                //返回undefined
$state.includes("item");                                  //返回undefined

也可以使用glob语法:

$state.$current.name = ‘contacts.details.item.url‘;

$state.includes("*.details.*.*"); // returns true
$state.includes("*.details.**"); // returns true
$state.includes("**.item.**"); // returns true
$state.includes("*.details.item.url"); // returns true
$state.includes("*.details.*.url"); // returns true
$state.includes("*.details.*"); // returns undefined
$state.includes("item.**"); // returns undefined

可以用于激活某个tab,让当前项高亮显示:

<li ng-class="{active:state.includes(‘dashboard.report‘)}"><a ui-sref="dashboard.report">Reports</a></li>

需要注意的是,在表达式里直接用$state是不行的,需要在控制器中把$state赋值给$scope下的变量.这样在表达式里才能使用:

    $stateProvider.state(‘dashboard‘,{
        url:‘/dashboard‘,
        templateUrl:‘./tpls/dashboard.html‘,
        controller:function($scope,$state){
            $scope.state = $state;
        }
    })
时间: 2025-01-07 00:50:48

angular的uiRouter服务学习(5) --- $state.includes()方法的相关文章

angular的uiRouter服务学习(3)

本篇接着上一篇 angular的uiRouter服务学习(2) 继续讲解uiRouter的用法 本篇主要讲解uiRouter的多个命名的视图 我们可以给ui-view元素添加ui-view的值来给它命名,这样,一个视图模板里就可以有多个ui-view标签. 比如下面这个应用,它需要动态的填充一个图表,图表里有一些表格数据,筛选项,等: 给视图命名,需要在状态里定义views属性. views的属性值为一个对象. views属性会覆盖template属性: 如果给状态定义了views属性,那么状态

angular的uiRouter服务学习(1)

angular有内置的路由服务$route:angular -- $route API翻译 使用$route可以帮助实现路由的切换,视图的改变,但是这个内置的$route只包含了基本的功能,在很多场合下是不够用的.所以,需要学习使用uiRouter. 首先,在页面中链入'angular-ui-router.min.js',然后在模块中写入依赖: var myapp = angular.module('myApp',['ui.router']); 然后就可以使用一个叫做$state的服务,使用$s

angular五种服务详解

在这之前angular学习笔记(十五)-module里的'服务'这篇文章里,已经大致讲解了ng中的'服务',在之后的很多地方也用到了服务,但是,所有的服务都是使用app.factory来创建的.但其实,创建服务有5种方法,这篇文章就来具体讲解ng中的五种服务类型. 首先,为了举栗子,先写好如下的模型,控制器,html: html: <!DOCTYPE html> <html ng-app="serviceApp"> <head> <title&

成为优秀Angular开发者所需要学习的19件事

一款to-do app基本等同于前端开发的"Hello world".虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已. Angular看起来似乎总是在改变和更新 - 但实际上,还是有一些事情仍然保持不变.以下是关于Angular所需要学习的核心概念的概述,以便大家可以正确地利用JavaScript框架. 说到Angular,我们需要学习很多东西,很多人被困在初学者的圈子里,仅仅是因为不知道去哪里搜索或者应该搜索什么关键词.下面我们会说到的这个指南(也

c# windows 服务学习

用C#做windows服务变得简单对了===按照下面步骤来就行了用C#创建Windows服务(Windows Services)例子服务功能:这个服务在启动和停止时,向一个文本文件中写入一些文字信息. 第一步:创建服务框架 要创建一个新的 Windows 服务,可以从Visual C# 工程中选取 Windows 服务(Windows Service)选项,给工程一个新文件名,然后点击 确定.你可以看到,向导向工程文件中增加WebService1.cs类:其中各属性的含意是: Autolog 是

angular的splitter案例学习

angular的splitter案例学习,都有注释了,作为自己的备忘. 运行下面代码          Angular pane splitter example                     Pane 1                                       Pane 2                 Pane 3 .split-panes {left: 0px;right: 0px;top: 0px;bottom: 0px;position: absolut

MMS服务学习

1.分类: 1)带确认服务 如后台的遥控操作 2)不带确认的 如测控装置定时的电流.电压遥测量的上送 2.MMS基本思想 屏蔽具体装置技术细节实现异构装置之间的互联互通 ,各装置必须按照MMS的规范完成VMD与实际装置之间的映射 3.MMS对象和服务 1)VMD模型包含以下内容: i)对象.属性(名字.值.类型) ii)服务Read Write MMS服务学习,布布扣,bubuko.com

微服务学习和认识

微服务学习和认识 1.什么是微服务 微服务架构风格:是一类将单一应用程序作为由众多小型服务构成之套件加以开发的方式,其中各项服务都拥有自己的进程并利用轻量化机制(通常为HTTP源API)实现通信.这些服务围绕业务功能建立而成,且凭借自动化部署机制实现独立部署.这些服务匹配一套最低限度的中央式管理机制,且各服务可通过不同编程语言编写而成并使用不同的数据存储技术 2.微服务的目 有效的拆分应用,实现敏捷开发和部署 3.微服务的优点 开发简单 技术栈灵活 服务独立无依赖 独立部署.按需扩展 可用性高

介绍Angular的注入服务

其实angular的注入服务是挺复杂的,目前看源码也只看懂了一半,为了不误导大家,我也不讲敢讲太复杂,怕自己都理解错了. 首先我们要知道angular的三种注入方式: 第一种:inference var myModule = function($scope){ } 第二种:annotation var myModule = function($location){ console.log('Module:代码注入$location成功'); console.log($location); } m