Угловой ui-route base controller extend

Я действительно потерян. Я использую u-route в своем угловом приложении, и я пытаюсь расширить свой базовый контроллер. Мой базовый контроллер (appCtrl) работает, но дочерний контроллер (navigationCtrl) не включен в приложение URL/приветствие. Ты знаешь почему???Угловой ui-route base controller extend

index.html

<body> 

    <div id="wrap"> 

     <!-- View for login and login-choose --> 
     <div ui-view="login"></div> 

     <!-- View for app --> 
     <div ui-view="app"></div> 

    </div> 

    <!-- SCRIPTS --> 
    <script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="./js/jasny-bootstrap.min.js"></script> 
    <script type="text/javascript" src="./js/angular.min.js"></script> 
    <script type="text/javascript" src="./js/angular-ui-router.min.js"></script> 
    <script type="text/javascript" src="./js/angular-touch.min.js"></script> 
    <script type="text/javascript" src="./js/app.js"></script> 
    <script type="text/javascript" src="./js/app.navigation.js"></script> 

</body>

app.js

var app = angular.module('tvm', ['ui.router', 'ngTouch']); 
app.config(function($stateProvider, $urlRouterProvider, $locationProvider) { 

// For any unmatched url, redirect to /state1 
$urlRouterProvider.otherwise("/"); 

// Set up the states 
$stateProvider 
    .state('login', { 
     url: "/", 
     views: { 
      "login": { templateUrl: "./pages/login.html" } 
     } 
    }) 
    .state('login-choose', { 
     url: "/login-choose", 
     views: { 
      "login": { templateUrl: "./pages/login-choose.html" } 
     } 
    }) 
    .state('app', { 
     url: "/app", 
     views: { 
      "app": { 
       templateUrl: "app.html", 
       controller: 'appCtrl' 
      } 
     } 
    }) 
     .state('app.welcome', { 
      url: "/welcome", 
      templateUrl: './pages/welcome.html' 
     }) 
     .state('app.profile', { 
      url: "/profile", 
      templateUrl: './pages/profile.html' 
     }); 

// remove # from URL 
$locationProvider.html5Mode({ 
    enabled: true, 
    requireBase: false 
}); 
}); 
app.controller('appCtrl', function($scope) { 
    $scope.parentMethod = function() { 
     alert('aaa'); 
    }; 
});

app.navigation.js

app.controller('navigationCtrl', ['$scope', '$controller', function($scope, $controller) { 
// extend app controller 
angular.extend(this, $controller('appCtrl', {$scope: $scope})); 

var nav = $('nav'); 
var content = $('#content, #bar'); 
var navWidth = nav.width() + 'px'; 
var navIcon = $('#bar .nav_icon .circle'); 

$scope.circleHover = function(e) { 
    navIcon.addClass('hover'); 
}; 

$scope.circleLeave = function(e) { 
    navIcon.removeClass('hover'); 
}; 

// open/close nav 
$scope.toggleNav = function(e) { 

    if(nav.hasClass('visible')) 
     closeNav(); 
    else 
     openNav(); 

}; 

// when swipe left to right open nav 
$scope.openSwipeNav = function(e) { 
    openNav(); 
}; 

// close nav 
$scope.closeNav = function(e) { 

    var elem = angular.element(e.target); 

    if((nav.hasClass('visible')) && (!$(elem).is('#bar'))) 
     closeNav(); 
}; 

// when swipe right to left close nav 
$scope.closeSwipeNav = function(e) { 
    closeNav(); 
}; 

var openNav = function() { 
    nav.animate({ 
     left: 0 
    }, 400, function() { 
     $(this).addClass('visible'); 
    }); 

    content.animate({ 
     left: navWidth 
    }, 400, function() { 
     $(this).removeClass('full'); 
    }); 

    navIcon.addClass('active'); 
}; 

var closeNav = function() { 

    nav.animate({ 
     left: '-' + navWidth 
    }, 400, function() { 
     $(this).removeClass('visible'); 
    }); 

    content.animate({ 
     left: 0 
    }, 400, function() { 
     $(this).addClass('full'); 
     navIcon.removeClass('active'); 
     navIcon.removeClass('hover'); 
    }); 
};

}]);

источник

2016-07-02 general666

Вы предоставляете состояния неверным образом, должны использовать приведенный ниже код. Это может помочь вам выйти из вашей проблемы

// Установка состояния

$stateProvider 
    .state('login', { 
    url: "/", 
    views: { 
     "login": { templateUrl: "./pages/login.html" } 
    } 
}) 
.state('login-choose', { 
    url: "/login-choose", 
    views: { 
     "login": { templateUrl: "./pages/login-choose.html" } 
    } 
}) 
.state('app', { 
    url: "/app", 
    templateUrl: "app.html" //no need to define the controller here. If this route is not usable else define the controller separately for both app and app.welcome 
}) 
    .state('app.welcome', { 
     url: "/welcome", 
     templateUrl: './pages/welcome.html', 
     controller: 'appCtrl' // need to mention the controller in which you wantto perform the functionality of app/welcome 
    }) 
    .state('app.profile', { 
     url: "/profile", 
     templateUrl: './pages/profile.html' 
    });

источник

2016-07-02 12:26:59

навигацияCtrl все еще не работает ... – general666

Хорошо мне удалось решить путем добавления angular.extend в базовый контроллер

app.controller('appCtrl', ['$scope', '$controller', function($scope, $controller) { 

     angular.extend(this, $controller('navigationCtrl', {$scope: $scope})); 
}]);

И я называю контроллер в своем первом состоянии:

.state('app', { 
     url: "/app", 
     views: { 
      "app": { 
       templateUrl: "app.html", 
       controller: 'appCtrl' 
      } 
     } 
    })

Затем он также запускает navigationCtrl

источник

2016-07-02 13:01:30 general666

Угловой ui-route base controller extend

ответ

Смежные вопросы