angulaire.js - Problème de mise à jour de la valeur visible dans Angularjs

Question

SolarTerms.controller('FooterCtrl', ['$state', '$rootScope', '$scope', fonction ($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>Page d'accueil</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>Calculer</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=""> Documents</span></p>

Obtenez l'index après avoir cliqué sur le p correspondant, puis modifiez la valeur correspondante dans $scope.imgsrc La console peut afficher correctement l'adresse de l'image, mais pourquoi faut-il cliquer deux fois sur la valeur dans ng-src dans la vue pour la modifier. ? Je veux juste changer l'adresse ng -Image dans src. Je viens de commencer à apprendre Angularjs. Quelqu'un peut-il me l'expliquer ?

Answer 1

Vous devez déclencher manuellement le mécanisme de rendu d'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')
                })
                
            })
        }