子視圖命名視圖

以下不加載是我的父/根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

子視圖命名視圖

回答

相關問題