Question

它不是一个带有ng-app的应用程序，它是angular.bootstrap应用程序，由于某种原因我无法使用ng-router。

任何人都有使用angular.bootstrap路由器的经验吗？

我在dom元素上使用angular bootstrap并尝试访问$ router参数

DOM

 <ul class="timeline" id="list" ng-controller="Controller" ng-view style="display: none">

Angularjs

var self = this;

angular.module(this.constructor.NAME, ["ngRoute"]) //ng-view, ng-controller
        .controller("Controller", ["$scope", "$element", "$routeProvider", function($scope, $element, $routeProvider){
             self.controller($scope, $element, $routeProvider)
         }]
);

angular.bootstrap(document.getElementById("list"), [this.constructor.NAME]);

控制器

controller: function($scope, $element, $routeProvider) {
    console.log($scope); //$scope is fine
    console.log($routeProvider); 
    console.log($element); //works if ng-view is not defined attr on <ul>
},

是否确实需要使用ng-view？我ng-view上不需要ul，但我想这需要让路线正常工作，我可以在没有它的情况下工作。我只需要路由器和参数。

ng-cloak 我使用display: none样式，因为ng-cloak很糟糕，我在数据准备好后手动将其删除。任何评论。

问题：

如何让它全部协同工作，以便$scope, $element and $routeProvider

修改

我意识到我应该使用配置。所以我更新了一些代码，但仍然没有$ routeProvider

angular.module(this.constructor.NAME, ["ngRoute"]) //ng-view, ng-controller
    .config(["$routeProvider"], function($routeProvider){
         console.log($routeProvider) //throwing error
     })
     .controller("Controller", ["$scope", "$element", function($scope, $element){self.controller($scope, $element)}]);

angular.bootstrap(document.getElementById("list"), [this.constructor.NAME]);

依赖关系

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>

Answer 1

我认为你想要$ routeParams来获取参数。这就是我通常设置我的应用程序的方法。 https://docs.angularjs.org/api/ngRoute/service/ $ routeParams

app.config(['$routeProvider', function ($routeProvider){
    $routeProvider
    .when('/admin/:pizza?', { //in this case, you would use $routeParams.pizza
        controller: 'homeController',
        templateUrl: '/views/whatever.html',
        caseInsensitiveMatch: true
    })
    .otherwise({
        controller: 'homeController',
        templateUrl: '/views/index.html'
    })
}]);

然后在我的控制器中

(function(){

    var homeController = function ($scope, $http, $location, $rootScope, $routeParams){   
        $rootScope.path = $location.path();
        $scope.pizza = $routeParams.pizza;
    };

    homeController.$inject = ['$scope', '$http', '$location', '$rootScope', '$routeParams'];
    app.controller('homeController', homeController);    

}());

这会使domain.com/#/admin/34353使$scope.pizza等于34353.您也可以根据需要链接任意数量的参数.when('/admin/:pizza?/:betterPizza?'。

参数后面的问号使其可以为空。

使用ng-view和路由器自举角度

1 个答案: