我写了个组件然后调用之后报了标题的错误
代码如下

    

        
{{$ctrl.worksDetailContent.name}}
    

    
    

          {{$ctrl.worksDetailContent.number}
    

这是组件的模板

(function () {
    angular.module('ui.component.worksDetailContent',[
        ])
        .directive('uiComponentWorksDetailContent',['$rootScope','$compile',
    function ($rootScope, $compile) {
        return {
            restrict: 'EA',
            scope: {
                worksDetailContent: "=",
            },
            templateUrl: "components/uiComponents/worksDetailContent/worksDetailContent.tpl.html",
            controller:uiComponentWorksDetailContentController
    }
    }])
    uiComponentWorksDetailContentController.$inject = [];
    function uiComponentWorksDetailContentController(){
    }
}())

这是组件的控制器

然后我在页面上调用了它

angular.module('worksDetailContent',[
    'ui.component.worksDetailContent',
])

angular.module('worksDetailContent')
    .controller('worksDetailContentCtrl', [
        function () {
            var ctrl = this;
            ctrl.worksDetailContents = [
                {
                     name:"哆啦A梦" ,
                     number:"27"
                }
            ];
        },
    ]);

然后也对控制器做了设定

.state("root.myArchives.body.content.workDetail", {
                        url: "/workDetail/:workId",
                        contentTitle:"个人作品",
                        // controller: "homeCtrl",
                        views: {
                            "contentBody@root.myArchives.body": {
                                templateUrl: "pages/myArchives/body/content/contentBody/workDetail/workDetail.tpl.html",
                                controller:"worksDetailContentCtrl as ctrl",
                            },
                        }
                    })

请问是哪里出了问题？我该如何修改的？