SolarTerms.controller('FooterCtrl', ['$state', '$rootScope', '$scope', function ($state, $rootScope, $scope) {
$scope.imgsrc = {
"imda1":"img/icon1.png",
"imda2":"img/icon2.png",
"imda3":"img/icon3.png",
"imda4":"img/icon4.png",
"imda5":"img/icon5.png"
}
}])
SolarTerms.directive("tabImg",function () {
return {
restrict:'A',
scope:false,
link:function (scope,ele,attr,ctrl) {
ele.bind('click',function (event) {
var index = $(this).index();
scope.imgsrc = {
"imda1":"img/icon1.png",
"imda2":"img/icon2.png",
"imda3":"img/icon3.png",
"imda4":"img/icon4.png",
"imda5":"img/icon5.png"
};
scope.imgsrc['imda'+(index+1)] = 'img/icon'+(index+1)+'1.png';
//scope.$apply(scope.imgsrc['imda'+(index+1)] = 'img/icon'+(index+1)+'1.png')
})
}
}
})
<p tab-img class="I_AF_p" ng-click="goto('index')"><img ng-src="{{imgsrc.imda1}}" alt=""> <span>Homepage</span></p>
<p tab-img class="I_AF_p" ng-click="goto('ye')"><img ng-src= "{{imgsrc.imda2}}" alt=""><span>Balance</span></p>
<p tab-img class="I_AF_p" ng-click="goto ('js')"><img ng-src="{{imgsrc.imda3}}" alt=""><span>Calculate</span></p>
< p tab-img class="I_AF_p" ng-click="goto('ck')"><img ng-src="{{imgsrc.imda4}}" alt=""><span>View </span></p>
<p tab-img class="I_AF_p" ng-click="goto('wd')"><img ng-src="{{imgsrc. imda5}}" alt=""><span>Documentation</span></p>
Get the index after clicking the corresponding p, and then change the corresponding value in $scope.imgsrc. The console can correctly output the image address, but why does the value in ng-src in the view need to be clicked twice to change? I just want to Change the image address in ng-src. I just started learning angularjs. Can someone explain it to me? Thank you.
You need to manually trigger angular’s rendering mechanism