代码之家 › 专栏 › 技术社区 › FootsieNG

Angular Js-更改视图不起作用

angularjs-routing single-page-application angularjs javascript

FootsieNG · 技术社区 · 10 年前

我正在尝试从控制器中更改视图,但它不起作用。

应用程序.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' });
});

视图: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>

控制器.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 回复 | 直到 10 年前

Josh 10 年前

更新:

我以前应该看过这个,但是 $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 Injection 来自官方的部分 Angular Developers Guide 将是一本好书。

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

$scope.selectVideo = function(video){

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

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

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

Harsh 10 年前

请尝试以下操作

$window.location = "/view2";

或单击按钮,该按钮依次使用功能:

$scope.randomFunctionAppears= function() {

    $window.location = "/view2";

};

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

2 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

2 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

2 年前

jieunbi · 按日期排序数组(最新优先)

2 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

2 年前

Stradosphere · 如何防止ng bind html添加结束标记?

6 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

6 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

6 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

6 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

6 年前