指令observe函数中的AngularJs-if（）条件不起作用

我正在尝试根据按钮单击调整CSS样式的大小。这样做的目的是基于单击动画来显示/隐藏内容。有一些现有的DOM和Javascript代码就是为了实现这一点而编写的，但现在我们需要将其迁移到AngularJS中（我对它非常陌生）

经过多次尝试和错误，我决定使用ng if来显示/隐藏内容，但我仍然需要设置CSS样式背景的高度，以便正确应用于扩展内容（内容的长度在生产应用程序中是动态的）

所以，为了设置“最大高度”，我尝试在点击按钮时在真和假之间切换一个变量，然后将其发送到“toggleHeight”指令。根据该值，指令应将maxHeight设置为scrollheight或null

HTML:

CSS:

但不管“toggleHeight”值如何，该值始终设置为scrollHeight。如果在if-else中打印变量的值，则表明其已更改，但执行的代码始终来自“true”块

---

因为我是新来的，所以我似乎遗漏了一些非常明显的东西。

请注意，在JavaScript中，字符串

“false”

的计算结果为

带花括号的表达式插值（

{{}

）将布尔值转换为字符串值

避免对字符串以外的值使用插值：

<div class="container" ng-controller="BaseController">
  <div ng-init "expandBox=false">
    <button ng-click="expandBox=!expandBox">Test</button>
  <br/>
    ̶<̶d̶i̶v̶ ̶c̶l̶a̶s̶s̶=̶"̶t̶e̶s̶t̶C̶s̶s̶"̶ ̶t̶o̶g̶g̶l̶e̶-̶h̶e̶i̶g̶h̶t̶=̶"̶{̶{̶e̶x̶p̶a̶n̶d̶B̶o̶x̶}̶}̶"̶
    <div class="testCss" toggle-height="expandBox">
    Lorem ipsum ......

---

此外，该指令不需要隔离作用域。

请注意，在JavaScript中，字符串

“false”

的计算结果为.Perfect！这很有效，谢谢你的清晰解释。我已经接受了答案，但对切换到$watch感到好奇，因为大多数文档似乎都建议使用$observe作为属性指令值。我现在对如何在两者之间进行选择感到困惑。很少有核心AngularJS指令使用$observe。我不知道是谁教的，但他们应该告诉学生，其中一个陷阱是它只返回字符串。

app.controller('BaseController', function($scope) {
    $scope.content = 'World';
})
.directive("toggleHeight",function(){
    return {
        restrict :"A",
        scope : {
            toggleHeight : "@"
        },
        link : function(scope,element,attrs){
           attrs.$observe("toggleHeight", function(value) {
               console.log("Value:",value);
               if(value) {
                   element[0].style.maxHeight=element[0].scrollHeight+"px";
                   console.log("height set to scrollHeight. value:",value);
               } else {
                   element[0].style.maxHeight="100px";
                   console.log("height is reset. value:",value);
               }
            })
         }
    };
});

 .testCss {
   color:white;
   background-color: black;
   max-height: 100px;
   overflow: auto;
 }

<div class="container" ng-controller="BaseController">
  <div ng-init "expandBox=false">
    <button ng-click="expandBox=!expandBox">Test</button>
  <br/>
    ̶<̶d̶i̶v̶ ̶c̶l̶a̶s̶s̶=̶"̶t̶e̶s̶t̶C̶s̶s̶"̶ ̶t̶o̶g̶g̶l̶e̶-̶h̶e̶i̶g̶h̶t̶=̶"̶{̶{̶e̶x̶p̶a̶n̶d̶B̶o̶x̶}̶}̶"̶
    <div class="testCss" toggle-height="expandBox">
    Lorem ipsum ......

app.directive("toggleHeight",function(){
    return {
        restrict :"A",
        //scope : {
        //    toggleHeight : "@"
        //},
        scope: false,
        link : function(scope,element,attrs){
           ̶a̶t̶t̶r̶s̶.̶$̶o̶b̶s̶e̶r̶v̶e̶(̶"̶t̶o̶g̶g̶l̶e̶H̶e̶i̶g̶h̶t̶"̶,̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶v̶a̶l̶u̶e̶)̶ ̶{̶
           scope.$watch(attrs.toggleHeight, function(value) {
               console.log("Value:",value);
               if(value) {
                   element[0].style.maxHeight=element[0].scrollHeight+"px";
                   console.log("height set to scrollHeight. value:",value);
               } else {
                   element[0].style.maxHeight="100px";
                   console.log("height is reset. value:",value);
               }
            })
         }
    };
});