Tôi đang cố gắng sử dụng tính năng ng-click của AngularJS để chuyển đổi chế độ xem. Làm thế nào tôi có thể làm điều này với mã dưới đây?
index.html
<div ng-controller="Cntrl">
<div ng-click="someFunction()">
click me
<div>
<div>control.js
function Cntrl ($scope) {
$scope.someFunction = function(){
//code to change view?
}
}Câu trả lời:
Để chuyển giữa các chế độ xem khác nhau, bạn có thể trực tiếp thay đổi window.location (sử dụng dịch vụ $ location!) Trong tệp index.html
<div ng-controller="Cntrl">
<div ng-click="changeView('edit')">
edit
</div>
<div ng-click="changeView('preview')">
preview
</div>
</div>Bộ điều khiển.js
function Cntrl ($scope,$location) {
$scope.changeView = function(view){
$location.path(view); // path not hash
}
}và định cấu hình bộ định tuyến để chuyển sang các phần khác nhau dựa trên vị trí (như được hiển thị tại đây https://github.com/angular/angular-seed/blob/master/app/app.js ). Điều này sẽ có lợi ích của lịch sử cũng như sử dụng ng-view.
Ngoài ra, bạn sử dụng ng-gộp với các phần khác nhau và sau đó sử dụng ng-switch như được hiển thị ở đây ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )
<a href="https://stackoverflow.com/edit">Edit</a> Angular sẽ đảm bảo rằng nhấp chuột không tạo ra tải lại trang. Hành vi này có thể được sửa đổi để nó kích hoạt tải lại nếu muốn.
Câu trả lời được cung cấp là hoàn toàn chính xác, nhưng tôi muốn mở rộng cho bất kỳ khách truy cập nào trong tương lai, những người có thể muốn thực hiện nó một cách linh hoạt hơn một chút -
Theo quan điểm -
<div ng-repeat="person in persons">
<div ng-click="changeView(person)">
Go to edit
<div>
<div>Trong bộ điều khiển -
$scope.changeView = function(person){
var earl = '/editperson/' + person.id;
$location.path(earl);
}Khái niệm cơ bản tương tự như câu trả lời được chấp nhận, chỉ cần thêm một số nội dung động vào nó để cải thiện một chút. Nếu câu trả lời được chấp nhận muốn thêm điều này, tôi sẽ xóa câu trả lời của tôi.
urlthực sự là địa chỉ web đầy đủ , bao gồm giao thức (http: //) và mọi thứ. Theo ngụ ý $location.path()của biến của bạn được mô tả tốt hơn là a path.
Tôi đã có một ví dụ làm việc.
Đây là cách tài liệu của tôi trông:
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular-resource.min.js"></script>
<script src="js/app.js"></script>
<script src="controllers/ctrls.js"></script>
</head>
<body ng-app="app">
<div id="contnr">
<ng-view></ng-view>
</div>
</body>
</html>Đây là một phần của tôi trông như thế nào:
<div id="welcome" ng-controller="Index">
<b>Welcome! Please Login!</b>
<form ng-submit="auth()">
<input class="input login username" type="text" placeholder="username" /><br>
<input class="input login password" type="password" placeholder="password" /><br>
<input class="input login submit" type="submit" placeholder="login!" />
</form>
</div>Đây là Ctrl của tôi trông như thế nào:
app.controller('Index', function($scope, $routeParams, $location){
$scope.auth = function(){
$location.url('/map');
};
});ứng dụng là mô-đun của tôi:
var app = angular.module('app', ['ngResource']).config(function($routeProvider)...Hy vọng điều này là hữu ích!
Phương pháp được sử dụng cho tất cả các câu trả lời trước cho câu hỏi này đề nghị thay đổi url không cần thiết và tôi nghĩ độc giả nên biết về một giải pháp thay thế. Tôi sử dụng ui-router và $ stateProvider để liên kết giá trị trạng thái với templateUrl để trỏ đến tệp html cho chế độ xem của bạn. Sau đó, vấn đề chỉ là đưa trạng thái $ vào bộ điều khiển của bạn và gọi $ state.go ('value-value') để cập nhật chế độ xem của bạn.
Sự khác biệt giữa tuyến đường góc và bộ định tuyến góc là gì?
Có hai cách cho việc này:
Nếu bạn đang sử dụng ui-router hoặc $stateProvider, hãy làm như sau:
$state.go('stateName'); //remember to add $state service in the controllernếu bạn đang sử dụng bộ định tuyến góc hoặc $routeProvider, hãy làm như sau:
$location.path('routeName'); //similarily include $location service in your controllerKhông cần thực hiện cải tiến toàn bộ môi trường định tuyến mặc định (# / ViewName), tôi có thể thực hiện một sửa đổi nhỏ cho mẹo của Cody và khiến nó hoạt động rất tốt.
bộ điều khiển
.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
function($route, $routeParams, $location) {
...
this.goToView = function(viewName){
$location.url('/' + viewName);
}
}]
);quan điểm
...
<li ng-click="general.goToView('Home')">HOME</li>
...Điều đưa tôi đến giải pháp này là khi tôi đang cố gắng tích hợp tiện ích UI Kendo Mobile vào môi trường góc cạnh, tôi đã mất bối cảnh của bộ điều khiển và hành vi của thẻ neo thông thường cũng bị tấn công. Tôi đã thiết lập lại bối cảnh của mình từ trong tiện ích Kendo và cần sử dụng một phương pháp để điều hướng ... điều này đã hoạt động.
Cảm ơn các bài viết trước!
Firstly you have to create state in app.js as below
.state('login', {
url: '/',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
and use below code in controller
$location.path('login'); Hy vọng điều này sẽ giúp bạn
Chức năng nhỏ này đã phục vụ tôi tốt:
//goto view:
//useage - $scope.gotoView("your/path/here", boolean_open_in_new_window)
$scope.gotoView = function (st_view, is_newWindow)
{
console.log('going to view: ' + '#/' + st_view, $window.location);
if (is_newWindow)
{
$window.open($window.location.origin + $window.location.pathname + '' + '#/' + st_view, '_blank');
}
else
{
$window.location.hash = '#/' + st_view;
}
};Bạn không cần đường dẫn đầy đủ, chỉ cần chế độ xem bạn đang chuyển sang