问题描述
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 ng-click='goto(’index’)'><img ng-src='https://www.6hehe.com/wenda/{{imgsrc.imda1}}' alt=''><span>首页</span></p><p tab-img ng-click='goto(’ye’)'><img ng-src='https://www.6hehe.com/wenda/{{imgsrc.imda2}}' alt=''><span>余额</span></p><p tab-img ng-click='goto(’js’)'><img ng-src='https://www.6hehe.com/wenda/{{imgsrc.imda3}}' alt=''><span>计算</span></p><p tab-img ng-click='goto(’ck’)'><img ng-src='https://www.6hehe.com/wenda/{{imgsrc.imda4}}' alt=''><span>查看</span></p><p tab-img ng-click='goto(’wd’)'><img ng-src='https://www.6hehe.com/wenda/{{imgsrc.imda5}}' alt=''><span>文档</span></p>
点击相应的p之后获取索引，然后更改$scope.imgsrc中相应的值，控制台能正确输出图片地址，但是视图中ng-src中的值为什么需要点击两次才能改变，我只是想更改ng-src中的图片地址，刚开始学angularjs，谁帮我解释下，谢谢。
问题解答
回答1：需要手动触发angular的渲染机制
link:function (scope,ele,attr,ctrl, $timeout) { 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'};$timeout(function() { scope.imgsrc[’imda’+(index+1)] = ’img/icon’+(index+1)+’1.png’; //scope.$apply(scope.imgsrc[’imda’+(index+1)] = ’img/icon’+(index+1)+’1.png’)}) })}
