angulaire.js - La liaison bidirectionnelle angulaire est rompue !

Question

Collez d'abord le code :

contrôleur :

.controller('FoldController', ['$scope', function ($scope){
    $scope.isFolded = true;   //  标志是否折叠的状态
}])

directive :

.directive('fold', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {

            // 只要点击其中的内容，让其折叠回去
            element.on('click',function () {  
                scope.isFolded = true;
                element.slideUp();
                console.log(scope);             
            });

            // 折叠的函数                
            function toggleFold(isFold) {

                isFold ? element.slideUp() : element.slideDown();
            }       

            // 监视是否折叠，即controller里定义的标志
            scope.$watch(attrs.fold, function (isFold) {
                toggleFold(isFold);
            });
        }
    }
})

html :

<nav class="navbar navbar-default" ng-controller="FoldController">
    <p class="container">
        <p class="navbar-header">
            <button type="button" class="navbar-toggle"
             ng-click="isFolded=!isFolded">  
            //  主要是这里  点击后toggle折叠的标志

                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a href="#/index" class="navbar-brand">Index {{isFolded}}</a>
                                          // 为了方便测试，我将折叠表示显示出来
        </p>
                                           // 这里用directive控制
        <p class="navbar-collapse collapse" fold="isFolded">
            <ul class="navbar-nav nav">
                <li class="active"><a href="#/index">index</a></li>
                <li><a href="#/about">about</a></li>
                <li><a href="#/contact">contact</a></li>
                <li><a href="#/chatroom">chatroom</a></li>
            </ul>
        </p>

    </p>
</nav>  

Effet :

Une fois plié

Une fois déplié

Soumission préliminaire terminée, mes attentes sont :

Lorsqu'il est déplié, cliquez sur la zone pliée pour le replier, et changez le drapeau pliable scope.isFold pour le restaurer à son état d'origine,

La question est :

Il y aura un bug, c'est-à-dire que j'ai modifié la valeur de scope.isFold et vérifié que la valeur de scope a été modifiée, mais la valeur d'origine est toujours sur la page, c'est-à-dire que la liaison bidirectionnelle n'est pas valide . Voir l'image ci-dessous

D'après l'affichage de l'image, la zone de pliage a été pliée. La sortie scope.isFold ci-dessous est également normale, vraie, mais la valeur en haut de la page est fausse. J'ai vérifié l'élément dom et elle est correcte. . J'ai vérifié le contrôleur. La valeur de scope.isFold dans la directive est correcte. Cette situation se produit de manière erratique, ce qui est assez déprimant. . .

Answer 1

Ajoutez $scope.$apply

à votre gestionnaire d'événements

Answer 2

 <p class="navbar-collapse collapse" fold ng-model="isFolded">
            <ul class="navbar-nav nav">
                <li class="active"><a href="#/index">index</a></li>
                <li><a href="#/about">about</a></li>
                <li><a href="#/contact">contact</a></li>
                <li><a href="#/chatroom">chatroom</a></li>
            </ul>
        </p>

js

.directive('fold', function () {
    return {
        require: 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs) {

            // 只要点击其中的内容，让其折叠回去
            element.on('click',function () {  
                scope.isFolded = true;
                element.slideUp();
                scope.$digest();
                console.log(scope);             
            });
   .....
     scope.$watch('isFolded', function (isFold) {
                toggleFold(isFold);
            });

Answer 3

La solution est :

Après avoir utilisé l'élément dom et modifié la valeur de l'attribut sur la portée, scope.$apply met à jour la vue

element.on('click', function() {
    pe.isFolded = !scope.isFolded;          
    element.slideUp();
    scope.$apply();
})

Answer 4

En fait, beaucoup de gens ont un malentendu, c'est-à-dire qu'ils utilisent toujours la surveillance des événements elemnet.on dans la fonction de lien,
Pourquoi ne pas utiliser ngClick et écrire une fonction scope.click dans le lien ?

Sauf si vous utilisez un plug-in jQuery tiers