AngularJS嵌套ui-view中ui-sref失效问题求助

Hey there! Let's dig into why your ui-sref isn't switching the ui-view="child1" content as expected. I've looked over your code, and the key issue is how your thirdChild state is configured—let's fix this step by step.

问题根源 #

Your thirdChild state doesn't specify which named ui-view it should render into. When working with nested named views, child states need to explicitly target the parent's named view. Right now, UI-Router doesn't know where to put the thirdChild template, since your parent state (parent) only has named views (child1 and child2), not an unnamed default view.

修正方案 #

Let's adjust your thirdChild state definition to target the child1 view in the parent state, and clean up a couple of other minor issues:

1. 修正thirdChild状态的视图配置

Add a views block to specify that the template should load into the child1 view of the parent state. We'll use absolute view naming ([viewName]@[stateName]) to avoid ambiguity:

var thirdChild = {
  name: "parent.child.third",
  url: "/child3",
  views: {
    // 格式：[视图名称]@[所属状态名称]
    'child1@parent': {
      template: "<h1>Another Child</h1>"
    }
  }
}

This tells UI-Router: "Find the ui-view="child1" in the parent state's template, and render this state's template there."

2. 清理childState的冗余配置

You added a name property to the child1 view in childState—this is unnecessary, since views don't need their own names (the state's name is sufficient for routing). Remove it to avoid confusion:

var childState = {
  name: "parent.child",
  url: "/child", // 这里建议添加开头的斜杠，避免URL拼接出错（比如变成"/childchild3"）
  views: {
    'child1': {
      // 移除多余的name属性
      templateUrl: "src/views/child.html"
    },
    'child2': {
      templateUrl: "src/views/child2.html"
    }
  },
  title: "Login Page",
}

3. 验证ui-sref的正确性

Your child.html has <h1 ui-sref="parent.child.third">Child State</h1>—this is correct! The full state name parent.child.third properly targets the nested child state.

测试效果 #

After making these changes, clicking the "Child State" link in child.html should now replace the content of ui-view="child1" with the thirdChild state's template ("Another Child").

内容的提问来源于stack exchange，提问作者cute_programmer