javascript - 更改 AngularJS 中路由的图标图像

Question

我想在进入/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”。

这里出了什么问题？

Answer 1

和 imageUrl 在两个 Controller 中处于不同的范围。如果您希望它们在每个地方都相同，请使用 $rootscope 而不是 $scope