ui-router不使用其他组件加载新状态

时间:2018-12-28 14:20:22

标签: angularjs angular-ui-router

编辑 我找到了一个解决方案并发现了一个奇怪的问题:问题是组件名称“ tdManagement”在大写字母之前只有两个小写字母,实际上,如果我输入三个小写字母,则一切正常。让我知道您是否遇到同样的情况,这是众所周知的问题还是错误。

我正在使用路由到组件的功能来开发一个简单的AngularJS应用程序;一切正常,除了我尝试更改状态并加载另一个组件时:浏览器的url更改了,但是模板(通常是组件)未加载

这是文件 app.route.js

angular.module("gestioneDocumentale")

.config(["$urlRouterProvider", "$stateProvider", function($urlRouterProvider, $stateProvider) {

    $urlRouterProvider.otherwise("/home");

    var homeState = {
        name: "home",
        url: "/home", 
        component: "paramSelect", 
        resolve: {
            ambienti: function(ParamService) {
                return ParamService.getAmbienti();
            }, 
            banche: function(ParamService) {
                return ParamService.getBanche();
            }, 
            applicativi: function(ParamService) {
                return ParamService.getApplicativi();
            }, 
            oggettiBusiness: function(ParamService) {
                return ParamService.getOggettiBusiness();
            }
        }
    };

    var templateState = {
        name: "templateManagement",
        url: "/templateManagement", 
        component: "tdManagement", 
        params: {
            obj: null
        } 
    };

    $stateProvider.state(homeState);
    $stateProvider.state(templateState);
}]);

这是第一个正确加载的组件,我使用$ state.go()更改了状态:

angular.module("gestioneDocumentale")

.component("paramSelect", {

    controller: ["$state", function($state) {
        this.selectedAmbiente = "";
        this.selectedBanca = "";
        this.selectedApplicativo = "";
        this.selectedBusinessObject = "";
        this.showMenu = false;
        this.changeHandler = function() {
            if (this.isSelectionValid()) 
                this.showMenu = true;
        }
        this.isSelectionValid = function() {
            if (this.selectedAmbiente === "" || this.selectedBanca === "" || this.selectedApplicativo === "")
                return false;
            return true;
        }
        this.changeMod = function() {
            var inputParams = {
                ambiente: this.selectedAmbiente, 
                banca: this.selectedBanca, 
                applicativo: this.selectedApplicativo
            }
            $state.go('templateManagement');
        }
    }], 

    templateUrl: "app/components/mod1/paramSelect/paramSelect.template.html", 

    bindings: {
        ambienti: "<", 
        banche: "<", 
        applicativi: "<",
        oggettiBusiness: "<"
    }
})

0 个答案:

没有答案