Question

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

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

我能够到目前为止最接近的是为div添加一个text属性。我已经通过在指令中将scope.text设置为'@'来完成此操作。

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

所以自定义按钮html正在工作，但按钮文本是“Click It”，但我希望它是“Click Me”。原因是该应用程序将通过i18n支持多种界面语言，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"
    };
});

customButton.html文件：

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

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

Answer 1

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

将customButton.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

Answer 2

您可以在指令中使用链接功能来实现它。基本上，链接函数从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();
       }
   };
});

Answer 3

只需使用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>

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

3 个答案: