Angular Js - 改变视图不起作用

时间:2014-03-13 12:23:05

标签: javascript angularjs single-page-application angularjs-routing

我试图从控制器更改视图但它不起作用。

app.js

var app = angular.module('vla', ['ngRoute']);
app.config(function ($routeProvider){
           $routeProvider
            .when('/view1',
                  {
                  controller: 'loginController',
                  templateUrl: 'partials/loginView.html'
                  })
           .when('/view2',
                 {
                 controller: 'noteController',
                 templateUrl: 'partials/videoView.html'
                 })
           .when('/view3',
                 {
                 controller: 'videoListController',
                 templateUrl: 'partials/videoListView.html'
                 })
           .otherwise({ redirectTo: '/view1' });
});

view:videoListView.html

<div class="video" data-ng-click="selectVideo(video)" ng-repeat="video in videos">
        <div ng-repeat="(key, val) in video|orderBy:orderByField:videoName">

            {{key}}: {{val}} </br>

        </div>
</div>

controller.js

app.controller('videoListController', function($scope,getVideoListService){

           $scope.selectVideo = function(video){
           $location.url('/view2');
           }
});

我尝试了以下但似乎没有工作

$location.url('#/view2');
$location.url('/view2');
$location.path('/view2');
$location.path('#/view2');

在视图页面上插入链接时,例如

<a href="#/view2"</a>click

页面已正确路由,非常感谢有关从控制器更改视图的任何帮助。

提前致谢

2 个答案:

答案 0 :(得分:2)

UPDATE:

我之前应该看过这个,但是$location是你没有传入的服务。

//Need to pass in $location
app.controller('videoListController', function($scope, $location, getVideoListService){

   $scope.selectVideo = function(video){
      $location.url('/view2');
   }
});

为了帮助你进一步推进你的Angular-foo,我会看看John Lindquist's fantastic videos at egghead.io。大多数Angular视频都可以免费观看。

除此之外,官方Dependency InjectionAngular Developers Guide部分将是一个很好的阅读。


根据您所描述的内容,我的猜测是您的功能根本没有被调用。尝试添加一些控制台输出以查看它是否被调用,然后努力解决您的问题。

$scope.selectVideo = function(video){

    console.log('Changing the route...');

    $location.path('/view2');
}

打开开发人员工具,检查控制台输出是否有错误。

答案 1 :(得分:0)

请尝试以下

$window.location = "/view2";

或点击按钮后依次使用功能:

$scope.randomFunctionAppears= function() {

    $window.location = "/view2";

};