Angularjs 如何从ng if决定的模板访问DOM元素

全部：

我是AngularJS指令模板的新手，现在有一件事让我困惑，那就是如何在指令模板中获得由ng if决定的DOM元素

例如：

app.directive("dir", function(){
    return {
        restrict:"AE",
        scope: {},
        controller: function(){},
        templateUrl: "templates/testpostlink.html",
        compile: function(){
            return {
                pre: function(){
                },
                post:function(scope, EL, attrs){
                     // Here I am wondering how to get that div (let say scope.show is true)
                }
            };
        }// end of compile
    };
});

模板testpostlink.html是：

<div ng-if="show">Show Content</div>

显示内容

我想做的是得到这个div元素并调整它的样式。但在post函数中，仍然没有生成该元素

有人能帮忙吗

---

谢谢

您做错的第一件事是没有传入show变量，因此ng if没有显示。其次，使用post-link函数向元素添加样式

应用程序指令（“dir”，函数（$compile）{
返回{
限制：“AE”，
//需要传入show变量
作用域：{show:“=”}，
templateUrl:'testpostlink.html'，
编译：函数编译（远程通讯、tAttrs、转置）{
返回{
post：功能postLink（范围、IELENT、iAttrs、控制器）{
//在post链接中访问元素并添加样式fn
css（'color'，'red'）；
}
}
}
}
});

您做错的第一件事是没有传入show变量，因此ng if没有显示。其次，使用post-link函数向元素添加样式

应用程序指令（“dir”，函数（$compile）{
返回{
限制：“AE”，
//需要传入show变量
作用域：{show:“=”}，
templateUrl:'testpostlink.html'，
编译：函数编译（远程通讯、tAttrs、转置）{
返回{
post：功能postLink（范围、IELENT、iAttrs、控制器）{
//在post链接中访问元素并添加样式fn
css（'color'，'red'）；
}
}
}
}
});

这是可能的，尽管有点烦人。基本上，您将在值更改的范围中添加$watch，然后每次重置el

app.directive("dir", function(){
    return {
        restrict:"AE",
        scope: {
            ngIf: "=" //add a two way binding so we can watch the ngIf
        },
        controller: function(){},
        templateUrl: "templates/testpostlink.html",
        compile: function(){
            return {
                pre: function(){
                },
                post:function(scope, EL, attrs){
                    // El should be [comment] when ngIf is false

                    var realEl; // store our real element. This will be destroyed and recreated every time ngIf changes

                    scope.$watch('ngIf', function(val){
                        if (val) {
                            //store our new real element
                            realEl = El.next();
                        }
                    });
                }
            };
        }// end of compile
    };
});

---

这是可能的，尽管有点烦人。基本上，您将在值更改的范围中添加$watch，然后每次重置el

app.directive("dir", function(){
    return {
        restrict:"AE",
        scope: {
            ngIf: "=" //add a two way binding so we can watch the ngIf
        },
        controller: function(){},
        templateUrl: "templates/testpostlink.html",
        compile: function(){
            return {
                pre: function(){
                },
                post:function(scope, EL, attrs){
                    // El should be [comment] when ngIf is false

                    var realEl; // store our real element. This will be destroyed and recreated every time ngIf changes

                    scope.$watch('ngIf', function(val){
                        if (val) {
                            //store our new real element
                            realEl = El.next();
                        }
                    });
                }
            };
        }// end of compile
    };
});

---

---

您可以使用使用表达式的

ng class

调整样式。如果某个表达式的计算结果为true，那么它将使用您提供的包含样式的css类

ng class=“{activeClass:show}”

。这很简单-您无法访问该元素。该元素可能还不存在。最好的方法是，如果元素本身会告诉您的指令它刚刚被链接。。。您可以为此使用

ngInit

。或者更好—如果您不介意在DOM中使用该元素，您可以使用

ngShow

而不是

ngIf

。这是一种jQuery思维方式，如果您想修改元素的样式，您应该使用指令，例如ngClass、ngStyle，或者如果需要自定义指令。你想用它做什么？@谢谢大家，我想我会改变设计（更好地理解angularJS，事实证明我需要提前计划和构建它。）并且使用ng样式仍然是一个很好的练习来理解加载顺序以及如何使用指令。看看我的答案。如上所述，如果您只是在寻找样式，那么ng style指令可能很容易解决您的问题。您可以使用使用表达式的

ng class

调整样式。如果某个表达式的计算结果为true，那么它将使用您提供的包含样式的css类

ng class=“{activeClass:show}”

。这很简单-您无法访问该元素。该元素可能还不存在。最好的方法是，如果元素本身会告诉您的指令它刚刚被链接。。。您可以为此使用

ngInit

。或者更好—如果您不介意在DOM中使用该元素，您可以使用

ngShow

而不是

ngIf

。这是一种jQuery思维方式，如果您想修改元素的样式，您应该使用指令，例如ngClass、ngStyle，或者如果需要自定义指令。你想用它做什么？@谢谢大家，我想我会改变设计（更好地理解angularJS，事实证明我需要提前计划和构建它。）并且使用ng样式仍然是一个很好的练习来理解加载顺序以及如何使用指令。看看我的答案。如上所述，如果您只是在寻找样式，那么ng style指令可能很容易解决您的问题。您可以使用使用表达式的

ng class

调整样式。如果某个表达式的计算结果为true，那么它将使用您提供的包含样式的css类

ng class=“{activeClass:show}”

。这很简单-您无法访问该元素。该元素可能还不存在。最好的方法是，如果元素本身会告诉您的指令它刚刚被链接。。。您可以为此使用

ngInit

。或者更好—如果您不介意在DOM中使用该元素，您可以使用

ngShow

而不是

ngIf

。这是一种jQuery思维方式，如果您想修改元素的样式，您应该使用指令，例如ngClass、ngStyle，或者如果需要自定义指令。你想用它做什么？@谢谢大家，我想我会改变设计（更好地理解angularJS，事实证明我需要提前计划和构建它。）并且使用ng样式仍然是一个很好的练习来理解加载顺序以及如何使用指令。看看我的答案。如上所述，如果您只是在寻找一种样式，那么ng style指令可能会很容易解决您的问题。谢谢，但是您的示例仅将样式应用于根元素，但是当涉及到它下面的元素并由ng if决定时，我该如何做呢？谢谢，但是您的示例仅将样式应用于根元素，但是当它涉及到