您可以将范围继承到子页面吗?

时间:2014-04-04 10:05:36

标签: angularjs

我的网址结构如下:

    when('/:location',{
        controller: 'locationController',
        templateUrl: 'partials/single.html',
    }).
    when('/:location/karta',{
        redirectTo: '/:location/karta/CYKLING'
    }).
    when('/:location/karta/:type',{
        templateUrl: 'partials/directions.html'
    }).

以及以下控制器:

controller('locationController', function($scope, $location, $routeParams, instagram, swimlocations) {
        $scope.name = $routeParams.location;
        $scope.location = swimlocations.getLocation($routeParams.location)
        instagram.getPhotosByLocation($scope.location.long,$scope.location.lat, 100, function(data){
            $scope.images = data;
        });
}).
controller('directionController'. function($scope, $location, $routeParams, swimlocations) {
    $scope.name = $routeParams.location;
        $scope.location = swimlocations.getLocation($routeParams.location)  
}).

正如你所看到的,除了向Instagram提出请求的第一个控制器之外,这两个控制器一样好。有没有办法避免这种代码重复?

3 个答案:

答案 0 :(得分:0)

Angular拥有“模块”概念...... 你需要一个模块类型的结构,将所有资源提供给儿童控制器。

例如参见Angularjs.org上的第二个最后一个例子..他们使用过模块。

它应该有帮助。

让我知道它是否有帮助..

答案 1 :(得分:0)

根据您的需要,您可以将常用功能放入原型中并将其用于控制​​器。有关原型的使用,请参阅ngController docs(该示例不使用继承)。

另一种解决方案是在父作用域中侦听位置事件并在那里设置属性。有关事件,请参阅$location docs

答案 2 :(得分:0)

你可以使用$ rootScope功能(也许不是完美的方式,但它很容易):

在您向我们展示路线的模块/配置后添加此内容。

when('/:location',{
        controller: 'locationController',
        templateUrl: 'partials/single.html',
    }).
    when('/:location/karta',{
        redirectTo: '/:location/karta/CYKLING'
    }).
    when('/:location/karta/:type',{
        templateUrl: 'partials/directions.html' // doesnt this need a controller to be caled?
    })
    .run(function($rootScope) {

        $rootScope.var = null; //global variable


    $rootScope.globalFoo = function(variable) {
        alert("I'm global function with variable! " + variable);
    }; // you can make your function here and make an IF to check what kind of calls u   need to make

$rootScope.globalFooReturn = function(variable) {
        return "I'm global function with variable! " + variable;
    }; 

然后将$ rootScope添加到您的控制器,只需调用该函数即可触发它:

controller('locationController', function($rootScope, $scope, $location, 
$routeParams, instagram, swimlocations){

$rootScope.globalFoo("Instagram");

$scope.message = $rootScope.globalFooReturn("Instagram");
alert($scope.message);

//or
alert($rootScope.globalFooReturn("Instagram"));


}