Javascript 使用controllerAs后出现ng重复问题

我之前使用过这个脚本，当用户单击一个表项时，它会在下面显示一个包含相关数据的第二个视图

我现在在我的

app.js的
state
配置中包含了
controllera
，由于某种原因，第二个视图不会加载到
ui视图中。在控制台中，您可以看到元素已加载但没有内容

通过
select
方法从视图（
list patents
）发送的数据可供
patent item.htm
控制器通过
app.run
使用
$rootScope
对象访问

我现在使用了
controllerAs
？

相关文件清单：


app.js
-调用后端
list patents.htm
-根据从函数
传递的值，将
patents item.htm
加载到
ui视图

patent item.htm
-显示模型中的相关数据

app.js

var app = angular.module('myApp', ['ngRoute','ui.router']);

app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider ) {

     $stateProvider
    .state("patents.list", {
        url: "/list-patents",
        templateUrl: "templates/patents/list/list-patents.htm",
        controller: "patentCtrl",
        controllerAs: "ctrl"
    })

    .state("patents.list.item", {
        url: "/patent-item",
        templateUrl: "templates/patents/list/patent-item.htm",
        params: {
          patentApplicationNumber: null,
           //futher list of parameters
        },
        controller: "patentCtrl"
    })
}]);

app.run(function($rootScope) {
    $rootScope.select = function(item) { 
        $rootScope.patentItem = []; 
        $rootScope.patentItem.push(item); 
    }
})

app.controller('patentCtrl', ['$scope', '$http', 'loadPatents', '$stateParams', 'patentService', 'patentTabFactory', function($scope, $http, loadPatents, $stateParams, patentService, patentTabFactory) {

    var vm = this;

    vm.patent={id:null, patentApplicationNumber:'', clientRef: '', renewalStatus: '', currentRenewalCost: '', costBandEndDate:'', renewalCostNextStage:'', renewalDueDate:''};
    vm.patents=[];

    vm.fetchAllPatents = function(){
        loadPatents.fetchAllPatents()
            .then(
            function(d) {
                vm.patents = d;
                console.log(vm.patents)
            },
            function(errResponse){
                console.error('Error while fetching Users');
            }
        );

       vm.selectedPatent = $scope.patentItem;

}]);

列出专利.htm

<div>
    <table>
        <thead>
            <tr>
                <td class="align-middle">Application No. </td>
                <td class="align-middle">Client Ref</td>
                <td class="align-middle">Cost now</td>
                <td class="align-middle">Cost band end</td>
                <td class="align-middle">Cost next</td>
                <td class="align-middle">Renewal Date</td>
                <td class="align-middle">Remove</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in ctrl.patents">
                <td ng-click="select(x)"><a ui-sref="patents.list.item({id: patentApplicationNumber: x.patentApplicationNumber, //list of further parameters (as seen in <thead>})">{{x.applicationNumber}}</a></td>
                <td ng-bind="x.clientRef"></td>
                <td ng-bind="x.currentRenewalCost">$</td>
                <td ng-bind="x.costBandEndDate"></td>
                <td ng-bind="x.renewalCostNextStage"></td>
                <td ng-bind="x.renewalDueDate"></td>
                <td><button type="button" class="btn btn-danger" ng-click="remove(x.id)">Remove</button></td>
            </tr>
        </tbody>
    </table>
    <div ui-view></div>     
</div>

<div>
    <script type="text/ng-template" id="patent-info.htm">
        <table>
            <tbody>
                <thead>
                    <tr>
                        <td>applicationNumber</td>
                        <td>clientRef</td>
                        <td>renewalStatus</td>
                        <td>costBandEndDate</td>
                        <td>renewalCostNextStage</td>
                        <td>renewalDueDate</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in selectedPatent track by $index">
                        <td>{{x.patentApplicationNumber}}</td>
                        <td>{{x.clientRef}}</td>
                        <td>{{x.renewalStatus}}</td>
                        <td>{{x.costBandEndDate}}</td>
                        <td>{{x.renewalCostNextStage}}</td>
                        <td>{{x.renewalDueDate}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </script>
    <script type="text/ng-template" id="cost-analysis.htm">
        //content
    </script>
    <script type="text/ng-template" id="renewal-history.htm">
        //content
    </script>


申请编号。
客户参考
现在成本
成本带端
下一个成本
续约日期
去除
{{x.applicationNumber}
$
去除

专利项目.htm

<div>
    <table>
        <thead>
            <tr>
                <td class="align-middle">Application No. </td>
                <td class="align-middle">Client Ref</td>
                <td class="align-middle">Cost now</td>
                <td class="align-middle">Cost band end</td>
                <td class="align-middle">Cost next</td>
                <td class="align-middle">Renewal Date</td>
                <td class="align-middle">Remove</td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="x in ctrl.patents">
                <td ng-click="select(x)"><a ui-sref="patents.list.item({id: patentApplicationNumber: x.patentApplicationNumber, //list of further parameters (as seen in <thead>})">{{x.applicationNumber}}</a></td>
                <td ng-bind="x.clientRef"></td>
                <td ng-bind="x.currentRenewalCost">$</td>
                <td ng-bind="x.costBandEndDate"></td>
                <td ng-bind="x.renewalCostNextStage"></td>
                <td ng-bind="x.renewalDueDate"></td>
                <td><button type="button" class="btn btn-danger" ng-click="remove(x.id)">Remove</button></td>
            </tr>
        </tbody>
    </table>
    <div ui-view></div>     
</div>

<div>
    <script type="text/ng-template" id="patent-info.htm">
        <table>
            <tbody>
                <thead>
                    <tr>
                        <td>applicationNumber</td>
                        <td>clientRef</td>
                        <td>renewalStatus</td>
                        <td>costBandEndDate</td>
                        <td>renewalCostNextStage</td>
                        <td>renewalDueDate</td>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in selectedPatent track by $index">
                        <td>{{x.patentApplicationNumber}}</td>
                        <td>{{x.clientRef}}</td>
                        <td>{{x.renewalStatus}}</td>
                        <td>{{x.costBandEndDate}}</td>
                        <td>{{x.renewalCostNextStage}}</td>
                        <td>{{x.renewalDueDate}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </script>
    <script type="text/ng-template" id="cost-analysis.htm">
        //content
    </script>
    <script type="text/ng-template" id="renewal-history.htm">
        //content
    </script>


应用程序编号
clientRef
更新状态
costBandEndDate
renewalCostNextStage
更新日期
{x.patentApplicationNumber}
{{x.clientRef}}
{x.renewalStatus}
{x.costBandEndDate}
{x.renewalCostNextStage}
{x.renewalDueDate}
//内容
//内容
选择功能中的
项
的值是什么？我的猜测是，由于您正在使用
controllerAs
覆盖
$scope
和
$rootScope
，因此视图试图调用控制器的
select（x）
函数，该函数不存在。在
$rootScope中放置一个断点。选择
函数并检查
项
值。另外，我认为这在
专利列表
状态下不起作用。您必须使用
ctrl
。对不起，您能给出一个粗略的示例吗？我会使用完全不同的方法，例如，将公共数据存储在
服务中，并使用getter和setter从不同的控制器检索它。另外，为什么两个视图使用相同的控制器？@Narmer当在父级的ui视图中设置子状态的模板时，子模板可以访问父级控制器的作用域属性