子视图命名视图

以下不加载是我的父/根HTML和JS代码：子视图命名视图

angular.module("myApp", ["ui.router"]) 
 
    .config(function ($stateProvider) { 
 
     $stateProvider 
 
      .state("parent", { 
 
       templateUrl: 'Parent.html', 
 
       controller: 'ParentController' 
 
      }) 
 
      .state('parent.child', { 
 
       views: { 
 
        '[email protected]': { 
 
         templateUrl: 'Child.html', 
 
         controller: 'ChildController' 
 
        } 
 
       } 
 
      }) 
 
    }) 
 
    .controller("ParentController", function ($scope, $state) { 
 
     $scope.currentTime = new Date(); 
 
     $scope.count = 1; 
 
     $scope.LoadChildView = function() { 
 
      $state.go("parent.child"); 
 
     } 
 
     $scope.Increment = function() { 
 
      $scope.count += 1; 
 
     } 
 
    })

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <title></title> 
 
    <meta charset="utf-8" /> 
 
    <script src="../../../Scripts/angular.min.js"></script> 
 
    <script src="../../../Scripts/angular-ui-router.min.js"></script> 
 
    <script src="Parent.js"></script> 
 
    <script src="Child.js"></script> 
 
</head> 
 
<body ng-controller="ParentController"> 
 
    Current time: {{currentTime}} 
 
    <input type="button" ng-click="Increment()" value="Increment" /> 
 
    Count: {{count}} 
 
    <div> 
 
     <input type="button" ng-click="LoadChildView()" value="Load" /> 
 
    </div> 
 
    <div ui-view="childView"></div> 
 
</body> 
 
</html>

当我点击 “Load” 按钮，内容/孩子的HTML。 html不会加载到父级的ui-view =“childView”中。

有什么想法？

P.S .:这是一些额外的文本，因为stackoverflow给我错误发布这个问题，抱怨“帖子主要包含代码，请添加一些更多的细节。”我不知道如何覆盖这个。

来源

2017-07-11 Deepak Agarwal

您的孩子和家长视图的网址是什么？ – Vivz

使用ui.router

index.html时应该有什么，但你的根视图，您不需要使用ng-controller

<!DOCTYPE html> 
<html ng-app="myApp"> 
<head> 
    ... 
</head> 
<body> 
    <div ui-view></div> 
</body> 
</html>

然后Parent.html

Current time: {{currentTime}} 
<input type="button" ng-click="Increment()" value="Increment" /> 
Count: {{count}} 
<div> 
    <input type="button" ng-click="LoadChildView()" value="Load" /> 
</div> 
<div ui-view="childView"></div>

原始代码是缺乏父级ui-view图层，所以子视图没有地方可以替换它自己。

来源

2017-07-12 03:23:55 Icycool

谢谢。可能我在我的基本理解中错过了一些东西，但是它是否必须具有未命名的ui-view的index.html？包含我的父控制器的html是我的起始页，我期望子视图在ui-view =“childView”内呈现。 –

@DeepakAgarwal是的，你可以这样做，把'parent'视为“根”，不需要在路由中提及。然后你可以将'child'设置为第一级状态。它类似于[tutorial]（https://ui-router.github.io/ng1/tutorial/helloworld） – Icycool

子视图命名视图

回答

相关问题