Javascript 用jqlite瞄准角度目标

我有一个自定义指令，其中包含一个带有角度对象的DOM元素，我想知道如何将该对象的值作为目标。 下面是一个例子：

app.directive('x', function() {
return {
  scope: {},
  restrict: 'E',
  template: '<span class="oinky">{{box.size}}</span>',
  link: function(scope, element, attrs) {

    if({{box.size}}>50 && {{box.size}}<=65) {

    element.css("background", "rgba(255, 216, 61, 0.7)");

  }else if({{box.size}}>65 && {{box.size}}<80){

    element.css("background", "rgba(235, 149, 51, 0.7)");

  }else if({{box.size}}>=80){

    element.css("background", "rgba(189, 45, 40, 0.7)");

  }else{

    element.css("background", "rgba(185, 211, 50, 0.7)");

  }

  }    
};

});

app.directive（'x'，function（）{
返回{
作用域：{}，
限制：'E'，
模板：“{box.size}}”，
链接：函数（范围、元素、属性）{
如果（{box.size}>50&&{{box.size}}65&&{box.size}}=80）{
css（“背景”，“rgba（189,45,40,0.7）”）；
}否则{
css（“背景”，“rgba（18521150,0.7）”）；
}
}    
};
});

像这样的。很抱歉，如果我对这个框架的了解还不够透彻，但我无法在google或StackOverflow上找到任何好的答案

---

谢谢你的帮助

您缺少的一点是此指令的用户如何设置

box.size的值。您已经用
范围：{}
的声明创建了一个独立的范围，因此目前无法将
框.size
设置为任何值

假设您希望将其作为独立组件（即不从父范围读取），则可以在指令范围上设置
boxsize
，并在使用指令时由用户设置：

app.directive('x', function() {
    return {
      scope: {
        boxSize:"=size"
      },
      restrict: 'E',
      template: '<span class="oinky">{{boxSize}}</span>',
      link: function(scope, element, attrs) {
        if(scope.boxSize>50 && scope.boxSize<=65) {
            element.css("background", "rgba(255, 216, 61, 0.7)");
        } else if(scope.boxSize>65 && scope.boxSize<80){
            element.css("background", "rgba(235, 149, 51, 0.7)");
        } else if(scope.boxSize>=80){
            element.css("background", "rgba(189, 45, 40, 0.7)");
        } else{
            element.css("background", "rgba(185, 211, 50, 0.7)");
        }
      }    
    };
});

假设父作用域有一个
box
对象，该对象具有
size
属性。
为什么在JavaScript代码中使用
{{box.size}
element.css（）
ids非常好。{{box.size}}作为占位符存在，因为我不知道如何定位它所表示的特定值@Satpal由于使用了
scope:{}，
而您正在使用隔离作用域，并且您必须定义
scope.box
像
scope.box={size:10}
很抱歉给您带来不便，但我想引入父作用域，以便我可以将其作为目标。更新的答案。只需注意使用范围的权衡。对于可重用组件，隔离范围更易于维护。感谢您的故障排除，您帮助了我很多，最后我将范围概念放在了我的头上。
<x size="55"/>

 app.directive('x', function() {
        return {          
          restrict: 'E',
          template: '<span class="oinky">{{box.size}}</span>',
          link: function(scope, element, attrs) {
            if(scope.box.size>50 && scope.box.size<=65) {
                element.css("background", "rgba(255, 216, 61, 0.7)");
            } else if(scope.box.size>65 && scope.box.size<80){
                element.css("background", "rgba(235, 149, 51, 0.7)");
            } else if(scope.box.size>=80){
                element.css("background", "rgba(189, 45, 40, 0.7)");
            } else{
                element.css("background", "rgba(185, 211, 50, 0.7)");
            }
          }    
        };
    });