When the view change its replace the previous view in ng-view. but its not changing. it showing the template data which is "context".
var app = angular.module("myapp", ["ngRoute"]);
app.service('datapass', function () {
this.name = "name";
});
app.config(function ($routeProvider) {
$routeProvider
.when("/name", {
template: 'Context',
controller: 'front_controller'
})
.when("/detail", {
template: 'My Name is Awais Saleem',
controller: 'main_controller'
})
.otherwise("/name");
});
app.controller("front_controller", function ($scope, datapass,$location) {
$scope.url = datapass.name;
$scope.changeView = function () {
$scope.url = datapass.name = (datapass.name == "name") ? "detail" : "name";
};
});
app.controller("main_controller", function ($scope, datapass,$location) {
$scope.url = datapass.name;
$scope.changeView = function () {
$scope.url = datapass.name = (datapass.name == "name") ? "detail" : "name";
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myapp">
<a ng-click="changeView()" href="#!{{url}}">
<div ng-view></div>
</a>
</body>When i click on the "context" then it should show the other page data, like "My Name is Awais Saleem" and i click on "My name is..." then it show the "Context". Basically i want to replace the previous view.
The controller defined are only accessible inside the <div ng-view></div> element, however, you are trying to use it in the parent tag (<a>). Therefore the controllers and its function are not recognized in the parent tag. Hence, here the <a> tag should be inside the template.
Also Instead of using a href, the better way would be to use $location.path().
var app = angular.module("myapp", ["ngRoute"]);
app.service('datapass', function() {
this.name = "name";
});
app.config(function($routeProvider) {
$routeProvider
.when("/name", {
template: '<a ng-click="changeView()" href="">Context</a>',
controller: 'front_controller'
})
.when("/detail", {
template: '<a ng-click = "changeView()" href="">My Name is Awais Saleem</a>',
controller: 'main_controller'
})
.otherwise("/name");
});
app.controller("front_controller", function($scope, datapass, $location) {
$scope.changeView = function() {
datapass.name = (datapass.name == "name") ? "detail" : "name";
$location.path("/"+datapass.name);
};
});
app.controller("main_controller", function($scope, datapass, $location) {
$scope.changeView = function() {
datapass.name = (datapass.name == "name") ? "detail" :"name";
$location.path("/"+datapass.name);
};
});<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myapp">
<div ng-view></div>
</body>