如何在 angular.js 指令中使用调用元素的文本

How to use the invoking element's text in an angular.js directive?

本文关键字：调用 元素 文本 angular js 指令      更新时间：2023-09-26

我正在使用一个角度.js指令来创建可重用的自定义按钮。这是我的第一个指令，所以我一直在翻阅文档，但我读过的大多数内容都假设指令代码将对来自控制器模型的数据进行操作。但在这种情况下，我想提供按钮文本作为元素文本，如下所示：

<div data-custom-button>Click Me</div>

到目前为止，我能够达到的最接近的是向div 添加一个文本属性。我通过在指令中将scope.text设置为"@"来做到这一点。

<div data-custom-button data-text="Click It">Click Me</div>

所以自定义按钮 html 正在工作，但按钮文本是"单击它"，但我希望它是"单击我"。原因是该应用程序将通过 i18n 支持多种界面语言，该语言填充所选语言文件中的元素文本。

所以这就是我调用指令的方式：

<div data-custom-button data-text="Click It"
     data-i18n="common:controls.login">Click Me</div>

以及 customButton 中的指令代码.js：

app.directive("customButton", function() {
    return {
        replace: true,
        restrict: 'A',
        scope: {
            text: '@'
        },
        templateUrl: "customButton.html"
    };
});

和自定义按钮.html文件：

<div class="customButtonWrapper">
    <!-- custom html removed for clarity -->
    <div class="customButtonText">{{text}}</div>
    <!-- custom html removed for clarity -->
</div>

有没有办法引用调用元素的文本？

这就是ng-transclude派上用场的地方

将自定义按钮.html更改为：

<div class="customButtonWrapper">
    <!-- custom html removed for clarity -->
    <div class="customButtonText" ng-transclude></div>
    <!-- custom html removed for clarity -->
</div>

并指示：

app.directive("customButton", function() {
    return {
        replace: true,
        transclude: true,
        restrict: 'A',
        templateUrl: "customButton.html"
    };
});

示例：jsFiddle

您可以使用指令中的链接函数来实现它。基本上，link 函数从div 读取文本值并将其分配给隔离的范围变量 "text"。

app.directive("customButton", function() {
return {
      replace: true,
      restrict: 'A',
      scope: {
          text: '@'
      },
      templateUrl: "customButton.html",
      link: function(scope,element,attr){
          $scope.text = element.text();
       }
   };
});

只需使用transclude：

app = angular.module('a',[]);
app.directive('customButton', function(){
  return {
    scope: {
    },
    transclude: true,
    template: '<button class="amazing">Yo! <ng-transclude></ng-transclude></button>',
    restrict: 'AE'
    
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<body ng-app="a">
<div custom-button="some">Super Text</div>
</body>

相关文章：