Görünümleri değiştirmek için AngularJS ng-tıklama özelliğini kullanmaya çalışıyorum . Bunu aşağıdaki kodla nasıl yapabilirim?
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?
}
}Yanıtlar:
Farklı görünümler arasında geçiş yapmak için index.html dosyasındaki window.location öğesini ($ location service! Kullanarak) doğrudan değiştirebilirsiniz.
<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
}
}yönlendiriciyi konuma göre farklı kısmi parçalara geçecek şekilde yapılandırın (burada gösterildiği gibi https://github.com/angular/angular-seed/blob/master/app/app.js ). Bu, ng-view kullanmanın yanı sıra tarihin de yararına olacaktır.
Alternatif olarak, farklı kısmi olan ng-include ve ardından burada gösterildiği gibi bir ng anahtarı kullanırsınız ( https://github.com/ganarajpr/Angular-UI-Components/blob/master/index.html )
<a href="https://stackoverflow.com/edit">Edit</a> Açısal, tıklamanın sayfa yeniden yüklemesi oluşturmadığından emin olur. Bu davranış, istenirse yeniden yüklemeyi tetikleyecek şekilde değiştirilebilir.
Verilen cevap kesinlikle doğrudur, ancak biraz daha dinamik olarak yapmak isteyen gelecekteki ziyaretçiler için genişletmek istedim -
Görünümde -
<div ng-repeat="person in persons">
<div ng-click="changeView(person)">
Go to edit
<div>
<div>Denetleyicide -
$scope.changeView = function(person){
var earl = '/editperson/' + person.id;
$location.path(earl);
}Kabul edilen cevapla aynı temel kavram, sadece biraz geliştirmek için dinamik içerik ekliyor. Kabul edilen cevap bunu eklemek isterse cevabımı silerim.
urlaslında protokol (http: //) ve her şeyi içeren tam web adresidir. $location.path()Değişkeniniz tarafından ima edildiği gibi, a path.
Çalışan bir örneğim var.
Doktorum şöyle görünüyor:
<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>İşte benim kısmi şöyle:
<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>İşte benim Ctrl şöyle görünüyor:
app.controller('Index', function($scope, $routeParams, $location){
$scope.auth = function(){
$location.url('/map');
};
});app benim modül:
var app = angular.module('app', ['ngResource']).config(function($routeProvider)...Umarım bu yardımcı olur!
Bu sorunun önceki tüm yanıtları için kullanılan yöntem, gerekli olmayan URL'yi değiştirmeyi önermektedir ve bence okuyucular alternatif bir çözümün farkında olmalıdır. Bir durum değerini, görünümünüz için html dosyasına işaret eden bir templateUrl ile ilişkilendirmek için ui-router ve $ stateProvider kullanıyorum. O zaman sadece $ durumunu kontrolörünüze enjekte etmek ve görünümünüzü güncellemek için $ state.go ('state-value') çağırmak önemlidir.
Bunun iki yolu vardır:
Ui-yönlendirici kullanıyorsanız veya $stateProviderşu şekilde yapın:
$state.go('stateName'); //remember to add $state service in the controlleraçısal yönlendirici kullanıyorsanız veya $routeProviderşu şekilde yapın:
$location.path('routeName'); //similarily include $location service in your controllerVarsayılan yönlendirme (# / ViewName) ortamını tam olarak yenilemeden, Cody'nin ucunda küçük bir değişiklik yapmayı başardım ve harika bir şekilde çalışmasını sağladım.
kontrol eden, denetleyici
.controller('GeneralCtrl', ['$route', '$routeParams', '$location',
function($route, $routeParams, $location) {
...
this.goToView = function(viewName){
$location.url('/' + viewName);
}
}]
);görünüm
...
<li ng-click="general.goToView('Home')">HOME</li>
...Beni bu çözüme getiren şey, bir Kendo Mobil UI widget'ını açısal bir ortama entegre etmeye çalıştığımda, kontrol cihazımın bağlamını kaybettim ve normal çapa etiketinin davranışı da kaçırıldı. İçeriğimi Kendo widget'ından yeniden kurdum ve gezinmek için bir yöntem kullanmam gerekiyordu ... bu işe yaradı.
Önceki gönderiler için teşekkürler!
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'); Umarım bu sana yardımcı olur
Bu küçük işlev bana iyi hizmet etti:
//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;
}
};Tam yola ihtiyacınız yok, sadece geçtiğiniz görünüme