angular.js - 关于指令link 中的创建变量问题

问题描述

问 题

angular.module("myDirective",[])
    .directive("tabOne",function (){
        return{
            restrict:"E",
            replace:true,
            scope:{
                data:"=myData",
            },
            transclude:true,
            template:' <div ng-hide="show">'+
            '<p ng-repeat="x in data">'+
                '{{x}}'+
    '</p>'+
    '</div>',
            link:function(scope,elem,attr){
                scope.show=true;
               elem.find("div").on("click",function(){
                    scope.show=!scope.show;
                    console.log(scope.show);
                });
            }
        }
    })

如问题所示我现在，在link创建一个变量show，这个show用在模板表示是否hide可是 scope.show一直显示true？
不知道问题出现在哪里求赐教给位！谢谢
但是console.log(scope.show）是同步改变的啊

解决方案

改：

elem.find("div").on("click",function(){
    scope.show=!scope.show;
    scope.$apply();
});

补充：

看文档

文档说了，如果是controller里的同步操作，或者是通过$http、$timeout、$interval的异步操作，scope.$apply()是自动执行的(Angular帮你做了)。但你这里显然不符合条件，你使用了DOM API，所以需要手动显示的调用一下scope.$apply()

文档地址: scope

这篇关于angular.js - 关于指令link 中的创建变量问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！