使用 jqlite 定位 Angular 对象

Targeting Angular object with jqlite

本文关键字：对象 Angular 定位 jqlite 使用      更新时间：2023-09-26

我有一个自定义指令，其中包含一个带有角度对象的 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)");
  }
  }    
};
});

像这样的东西。抱歉，如果我对框架的了解看起来很原始，但我无法在谷歌或StackOverflow上找到任何好的答案。

感谢您的帮助！

您缺少的一点是此指令的用户如何能够设置box.size的值。您已经创建了一个声明为scope:{}的独立作用域，因此目前无法将box.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)");
        }
      }    
    };
});

然后可以使用：

<x size="55"/>

有关带有指令的作用域的更多信息，请查看$compile的文档，奇怪的是，这是指令信息的最佳位置：(https://docs.angularjs.org/api/ng/service/$compile

更新：使用父范围要使用父范围，只需删除scope: {}部分。这意味着link函数的scope参数将是父函数的参数。

像这样：

 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)");
            }
          }    
        };
    });

这假定父范围具有具有 size 属性的 box 对象。

相关文章：