我想在进入/tab1 后更改图像。这可以通过“ng-click”来完成。但需要使用 AngularJS 路由来完成。
HTML 文件:
<div class = "body" ng-controller = "app">
<div class = "column1">
<div class = "tab1">
<a href = "#/tab1"><img ng-src="{{ imageUrl }}"></a>
</div>
Controller .js:
var application = angular.module('mainApp', ['ngRoute']);
application.controller('app', function($scope) {
console.log("Executed");
$scope.imageUrl = 'profile-icon.png';
});
application.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/tab1', {templateUrl: 'tab1.html', controller: HomeCtrl}).
when('/tab2', {templateUrl: 'tab2.html'}).
when('/tab3', {templateUrl: 'tab3.html'}).
otherwise({redirectTo: '/'});
}]);
function HomeCtrl($scope) {
console.log("Inside ToggleImage");
$scope.imageUrl = 'profile-icon-clicked.png';
}
页面成功加载“profile-icon.png”。但点击后图像没有变化。但我可以在浏览器控制台中看到输出“Inside ToggleImage”。
这里出了什么问题?
最佳答案
和 imageUrl
在两个 Controller 中处于不同的范围。如果您希望它们在每个地方都相同,请使用 $rootscope
而不是 $scope
关于javascript - 更改 AngularJS 中路由的图标图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35738904/