Question

我有一个父状态和许多孩子状态。如果我希望父母的ui-sref-active在我上一个孩子时工作，我需要这样做＆＃34; hack＆＃34;：

$scope.isActive = function() {  
   return $state.includes('playLotteries.Index') 
       || $state.includes('playLotteries.Group')  
       || $state.includes('playLotteries.hunter');
   }

这是非常丑陋的方式，我有很多孩子所以它似乎不是一个好的解决方案。任何人有这个问题的另一种解决方案

Answer 1

有UI-Router指令：

<强> ui-sref-active="class-name-to-use"

来自版本0.2.11的

完全符合我们的要求：

的 uiSrefActive：

BREAKING CHANGE：同时激活子状态。（bf163ad，关闭＃818）
   uiSrefActiveEq：具有旧ui-sref-active行为的新指令

所以，如果我们只想为完全匹配分配课程，我们必须使用它： ui-sref-active-eq="class-name-to-use"

那么，你为什么要经历：这不起作用？

因为只能与ui-sref指令结合使用。

有a working plunker

这些不会按预期工作：

// NOT working as expected <a ui-sref-active="current" href="#/home"> <a ui-sref-active="current" href="#/home/child1"> <a ui-sref-active="current" href="#/home/child2">

但这些将会有效：

// conjunction ui-sref and ui-sref-active is working <a ui-sref-active="current" ui-sref="home"> <a ui-sref-active="current" ui-sref="home.child1"> <a ui-sref-active="current" ui-sref="home.child2">

检查行动here。示例使用此UI-Router 0.2.12 release - 以及此zip

EXTEND：父母应该是抽象的，应该总是选择一些孩子

在这种情况下，我们可以使用UI-Router的另一个功能，即：$urlRouterProvider.when()。

有extended plunker因此，状态定义如下：

// when 'home' is selected ... 'home.child2' is used for redirection $urlRouterProvider.when('/home', '/home/child2'); // instead of 'other' - its 'other.child2' is used... could be any (e.g. other.child1) $urlRouterProvider.when('/other', '/other/child2'); $urlRouterProvider.otherwise('/home/child2');

所以，现在，总是选择子项（即使导航到父项）并且父项正在获取其ui-sref-active。检查here

Answer 2

您只能检查parent state，而不是检查all child州

$scope.isActive = function() {  
   return $state.includes('playLotteries');
}

Answer 3

扩展RadimKöhler的帖子。如果您使用index state with an abstract parent state，例如

public class MyCursorAdapter extends CursorAdapter {

    public MyCursorAdapter(Context context, Cursor cursor, int flags) {
        super(context, cursor, 0);
    }

    @Override
    public View newView(Context context, Cursor cursor, ViewGroup parent) {
        return LayoutInflater.from(context).inflate(R.layout.mylist, parent, false);
    }

    @Override
    public void bindView(View view, Context context, Cursor cursor) {       

        TextView nameView = (TextView) view.findViewById(R.id.nameView);
        nameView.setText(name);
    }
}

...并希望“家庭”在Microsoft.Practices.CompositeWeb.WebClientApplication上显示为有效时，您可以首先使用CSS隐藏<a ui-sref-active="current" ui-sref="home.index">Home</a> <a ui-sref-active="current" ui-sref="home.child1">Home » Child1</a> <a ui-sref-active="current" ui-sref="home.child2">Home » Child2</a>：

home.child1

这可行，因为“ui-sref可以与<li ui-sref-active="current"> <a style="display:none" ui-sref="home"></a> <a ui-sref="home.index">Home</a> </li> <li ui-sref-active="current"> <a ui-sref="home.child1">Home » Child1</a> </li> <li ui-sref-active="current"> <a ui-sref="home.child2">Home » Child2</a> </li>或父元素位于同一元素上。第一个ui-sref-active位于同一级别或ui-sref之上将会被使用。”每ui-sref-active reference

请参阅this plunker了解演示。

Answer 4

ui-sref-active可以使用*[wild card]来匹配子状态。这将适用于抽象状态。

<li ui-sref-active="{'active':'playLotteries.**'">
    <span>section</span>
    <ul>
        <li ui-sref-active="playLotteries.Index">
            <a ui-sref="playLotteries.Index">Index</a></li>
        <li ui-sref-active="playLotteries.Group">
            <a ui-sref="playLotteries.Group">Group</a></li>
        <li ui-sref-active="playLotteries.hunter">
            <a ui-sref="playLotteries.hunter">hunter</a></li>
    </ul>
</li>

详细了解uiSrefActive directive

Angular ui router ui-sref-active on parent

4 个答案:

的 uiSrefActive：

EXTEND：父母应该是抽象的，应该总是选择一些孩子