Question

以下是我的父/根HTML和JS代码：

＆＃13;

angular.module("myApp", ["ui.router"])
    .config(function ($stateProvider) {
        $stateProvider
            .state("parent", {
                templateUrl: 'Parent.html',
                controller: 'ParentController'
            })
            .state('parent.child', {
                views: {
                    'childView@parent': {
                        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;
        }
    })

＆＃13;

<!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>

＆＃13;

当我点击＆＃34;加载＆＃34;按钮，child.html的内容/ HTML未加载到ui-view =＆＃34; childView＆＃34;父母

Answer 1

使用ng-controller

时，您不需要使用ui.router

index.html应该只有你的根视图

<!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图层，因此子视图无法替换自身。

子视图未在命名视图中加载

1 个答案: