AngularJS指令点击更新类：控制台变量更新但视图未同步的解决方法

嘿，这个问题我之前也碰到过！核心原因是你用原生DOM的click事件绑定，这个事件触发的代码不在Angular的**变更检测循环（digest cycle）**里——Angular只有在自己的上下文（比如ng-click、$timeout或者手动触发$apply）里才会检查数据变化并更新视图，所以你控制台能看到scope.myattr变了，但视图就是没反应。

给你两个靠谱的解决方案：

方案一：手动触发Angular的变更检测 #

在原生click回调里用scope.$apply()把更新逻辑包起来，这样Angular就会知道数据变了，进而更新视图：

.directive("test", function () {
    return {
        restrict: 'E',
        scope: {
            myattr: "="
        },
        transclude: true,
        link: function (scope, element, attrs) {
            scope.myattr = attrs.myattr;
            element.bind('click', function () {
                // 用$apply包裹更新逻辑，触发变更检测
                scope.$apply(function() {
                    console.log(scope.myattr);
                    if (scope.myattr == 'A') {
                        scope.myattr = 'B';
                    } else {
                        scope.myattr = 'A';
                    }
                });
            });
        },
        template: `
            <span ng-transclude></span>
            <span class="sortIcon {{myattr}}">{{myattr}}</span>
        `
    }
});

方案二：改用Angular的ng-click指令（更推荐） #

直接用Angular自带的ng-click，它会自动帮你触发变更检测，代码也更贴合Angular的开发风格：

.directive("test", function () {
    return {
        restrict: 'E',
        scope: {
            myattr: "="
        },
        transclude: true,
        link: function (scope, element, attrs) {
            scope.myattr = attrs.myattr;
            // 定义点击处理函数
            scope.toggleMyAttr = function() {
                console.log(scope.myattr);
                scope.myattr = scope.myattr === 'A' ? 'B' : 'A';
            };
        },
        template: `
            <!-- 给可点击元素加上ng-click绑定处理函数 -->
            <span ng-transclude ng-click="toggleMyAttr()"></span>
            <span class="sortIcon {{myattr}}">{{myattr}}</span>
        `
    }
});

另外提个小建议：你现在在link函数里直接把attrs.myattr赋值给scope.myattr，如果是双向绑定（myattr: "="）的话，更规范的做法是让父作用域传递这个值，比如父模板里写<test myattr="parentVar">Test</test>，然后父控制器里定义$scope.parentVar = 'A'，这样双向绑定才能真正发挥作用哦。

内容的提问来源于stack exchange，提问作者om_jaipur