Question

当用户进入父级的子状态之一时，我试图让父视图的一部分发生变化。

以下是一段简短的代码片段，用于演示我的意图以及由此产生的异常。

<!doctype html>
<html data-ng-app="myModule">

<body>
    <div data-ui-view>
        Type Info: {{ typeInfo }}
        <div data-ui-view>
            <button data-ng-repeat="type in tArray" data-ng-click="changeT(type)">
                {{ type.desc }}
            </button>
        </div>
    </div>

    <script src="./angular.min.js"></script>
    <script src="./angular-ui-router.js"></script>

    <script>
        var module = angular.module('myModule', ['ui.router']);

        module.controller('MyCtrl', function($scope, $state) {
            function testType(description, color) {
                this.desc = description;
                this.color = color;
            }

            $scope.tArray = [
                new testType('First', 'red'),
                new testType('2nd', 'blue'),
                new testType('Third (3rd)', 'green')
            ];

            $scope.typeInfo = {};

            $scope.changeT = function(typeObj) {
                $scope.typeInfo.t = typeObj;
                $state.go('.childState');
            };
        });

        module.config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.when("", "/");

            $stateProvider
                .state('root', {
                    url: '/',
                    controller: 'MyCtrl'
                })
                .state('root.childState', {
                    url: '/child',
                    template: 'I am the child!<button ui-sref="root">root</button>'
                });
        });
    </script>
</body>

</html>

这似乎与“ui-view”中的“ng-repeat”有关。如果我删除“ng-repeat”，则不会发生异常。有趣的是，如果我注释掉“$ scope.tArray”的声明，也不会发生异常。

代码的JSFiddle：

http://jsfiddle.net/cdvhmxp0/4/

使用Chrome可以看到异常。在Firefox中，它似乎抛出了“Error：parentNode is null”异常。但从功能上来说，代码似乎正在按预期工作。

TypeError：无法读取null
的属性“insertBefore”

我对AngularJS相对较新，所以如果我以一种人为的，非惯用的或不合逻辑的方式做事，请随时告诉我。

感谢您的帮助。

Answer 1

这里的主要问题是，您现在尝试为子ui-view定义两次模板。第一次在配置和第二次在HTML中。您可以定义其中两个以实现默认视图，并将根状态设置为不带URL的抽象状态，而不是定义一个子状态。我修改了您的代码，现在没有错误：

<div data-ng-app="myModule">
    <div data-ui-view>
        Type Info: {{ typeInfo }}

        <div data-ui-view></div>
    </div>

    <script>
        var module = angular.module('myModule', ['ui.router']);

        module.controller('MyCtrl', function($scope, $state) {
            function testType(description, color) {
                this.desc = description;
                this.color = color;
            }

            $scope.tArray = [
                new testType('First', 'red'),
                new testType('2nd', 'blue'),
                new testType('Third (3rd)', 'green')
            ];

            $scope.typeInfo = {};

            $scope.changeT = function(typeObj) {
                $scope.typeInfo.t = typeObj;
                $state.go('root.childState');
            };
        });

        module.config(function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/");

            $stateProvider
                .state('root', {
                    controller: 'MyCtrl',
                    abstract: true
                })
                .state('root.default', {
                    url: '/',
                    template: '<button data-ng-repeat="type in tArray" data-ng-click="changeT(type)">{{ type.desc }}</button>'
                })
                .state('root.childState', {
                    url: '/child',
                    template: 'I am the child!<button ui-sref="root.default">root</button>'
                });
        });
    </script>
</div>

＆＃34;纳克重复＆＃34;在一个＆＃34; ui-view＆＃34;导致＆＃34; TypeError：无法读取属性＆＃39; insertBefore＆＃39; of null＆＃34;异常[AngularJS]

1 个答案: