Tôi đang cố sử dụng tính năng ng-click của AngularJS để chuyển đổi chế độ xem. Làm thế nào tôi sẽ làm điều này với mã dưới đây?AngularJS: Làm cách nào để chuyển đổi chế độ xem từ một chức năng điều khiển?
index.html
<div ng-controller="Cntrl">
<div ng-click="someFunction()">
click me
<div>
<div>
controller.js
function Cntrl ($scope) {
$scope.someFunction = function(){
//code to change view?
}
}
Để chuyển đổi giữa các quan điểm khác nhau, bạn trực tiếp có thể thay đổi window.location (sử dụng dịch vụ vị trí $!) Trong index.html file
<div ng-controller="Cntrl">
<div ng-click="changeView('edit')">
edit
</div>
<div ng-click="changeView('preview')">
preview
</div>
</div>
Controller.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ị ở đâ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-bao gồm với partials khác nhau và sau đó sử dụng một ng-switch như trong đây (https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html)
Tôi đã có một ví dụ làm việc.
Sau đây là cách doc 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à những gì nhìn một phần của tôi như:
<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à những gì Ctrl tôi trông giống như:
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 hữu ích!
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ỳ du khách trong tương lai những người có thể muốn làm điều đó tự động thêm một chút -
Trong giao diện -
<div ng-repeat="person in persons">
<div ng-click="changeView(person)">
Go to edit
<div>
<div>
Trong điều khiển -
$scope.changeView = function(person){
var earl = '/editperson/' + person.id;
$location.path(earl);
}
Khái niệm cơ bản giống như câu trả lời được chấp nhận, chỉ cần thêm một số nội dung động để 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.
tổng số nitpick, nhưng FYI, một 'url' thực sự là địa chỉ web __full__, bao gồm giao thức (http: //) và mọi thứ. Như ngụ ý bởi '$ location.path()', biến của bạn được mô tả tốt hơn như là một 'đường dẫn'. –
@ZachL Đã sửa lỗi –
Nhưng nó yêu cầu $ rootScope. $ Digest(); hoặc $ scope. $ apply(); để làm cho nó di chuyển không chậm trễ. – Raz
Không sửa đổi hoàn toàn môi trường định tuyến mặc định (#/ViewName), tôi có thể sửa đổi một chút mẹo của Cody và làm cho nó hoạt động 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>
...
gì mang lại cho tôi để giải pháp này là khi tôi đã cố gắng để tích hợp một widget Kendo Mobile UI vào một môi trường góc Tôi đã mất bối cảnh bộ điều khiển của tôi và hành vi của thẻ neo thường xuyên cũng bị tấn công. Tôi đã thiết lập lại bối cảnh của mình từ bên 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 đã hiệu quả.
Cảm ơn các bài đăng trước!
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 đề xuất thay đổi url không cần thiết và tôi nghĩ độc giả nên biết về giải pháp thay thế. Tôi sử dụng ui-router và $ stateProvider để kết hợp một giá trị trạng thái với một templateUrl trỏ đến tệp html cho khung nhìn của bạn. Sau đó, nó chỉ là vấn đề tiêm trạng thái $ vào bộ điều khiển của bạn và gọi $ state.go ('state-value') để cập nhật view của bạn.
What is the difference between angular-route and angular-ui-router?
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ốt cho tôi:
//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 xem bạn đang chuyển sang
Có hai cách cho việc này:
Nếu bạn đang sử dụng ui-router hoặc $stateProvider, làm điều đó như:
$state.go('stateName'); //remember to add $state service in the controller
nếu bạn đang sử dụng góc-router hoặc $routeProvider, làm điều đó như:
$location.path('routeName'); //similarily include $location service in your controller
Trên điều mà tôi vấp phải là sử dụng tên tuyến thay vì tên tiểu bang ... tức là nó phải là "chính" thay vì "/ chính" –
tôi nhận được một lỗi nói rằng hàm băm không phải là hàm của $ location. –
Tôi không thấy hàm băm như là một phần của đối tượng vị trí $, nhưng có một biến băm $$ để nó và nếu nó không hoạt động. –
OK, tôi đã tìm hiểu cách thực hiện. $ location.path (xem); (http://docs.angularjs.org/guide/dev_guide.services.$location) –