angularjs指令，用于将某些内容附加到dom html值_Angularjs

angularjs指令，用于将某些内容附加到dom html值

angularjs

angularjs指令，用于将某些内容附加到dom html值,angularjs,Angularjs,我想向现有元素的html值添加一些内容。比如说 <button type="button">Something</button> 什么我想把它显示为 <button type="button">Something Else<button> 还有别的吗我期望的代码如下所示 .directive('button', function (){ return { restrict:'E', scope

我想向现有元素的html值添加一些内容。比如说

<button type="button">Something</button>

什么我想把它显示为

<button type="button">Something Else<button>

还有别的吗

我期望的代码如下所示

.directive('button', function (){
    return {
        restrict:'E',
        scope: { text: 'NOT_SURE_WHAT_TO_PUT_TO_GET_DOM_HTML',
        template: '{{text}} <span>Else</span>',
        link: function (scope, element, attrs) {
        }
    };
});

.directive（'button'，function（）{
返回{
限制：'E'，
作用域：{text:'不确定\u放置什么\u放置\u获取\u DOM\u HTML'，
模板：“{text}}Else”，
链接：函数（范围、元素、属性）{
}
};
});

似乎在链接函数中，element.text（）获取

Else

那么，如何获取按钮的原始文本值并向其添加新字符串呢

-------------更新--------------

我只想知道如何在指令中重用元素上的现有文本

Button已经是一个html元素，因此您无法使用它生成指令。我建议改为使用类似于我的Button的内容。此外，我将restrict更改为“a”，因为我正在使用该指令作为属性。因此，类似这样的内容可以工作：

html：

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <button type="button" my-button xyz="'something else'">Something</button> 
  </body>

</html>

好的，根据您提供的其他信息，我想您希望在指令中使用transclude


某物

还有javascript：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

app.directive('myButton', function (){
    return {
        restrict:'A',
        scope: { xyz: "@"},
        template: '{{xyz}}',
        link: function (scope, element, attrs) {
        }
    };
});

app.directive('button', function (){
    return {
        restrict:'E',
        scope: { add: "@"},
        template: '{{add}} <div ng-transclude></div>',
        transclude: true,
        link: function (scope, element, attrs) {
        }
    };
});

app.directive（'button'，function（）{
返回{
限制：'E'，
作用域：{添加：“@”}，
模板：“{{add}}”，
是的，
链接：函数（范围、元素、属性）{
}
};
});

我知道如何这样做。但我想要的是扩展现有的DOM以拥有更多的功能。You's stmt“按钮已经是html元素，因此您无法从中生成指令。”好的，根据您的其他信息，我已经扩展了我的答案，其中包括使用“transclusion”。我想这就是你想要的。如果没有，请告诉我。ng-TRANCLUDE！是的！谢谢你~~~！我只是想知道如何提取元素的文本并在模板中重用它。

 <body ng-controller="MainCtrl">
    <button type="button" add="Something Else">Something</button> 
  </body>

app.directive('button', function (){
    return {
        restrict:'E',
        scope: { add: "@"},
        template: '{{add}} <div ng-transclude></div>',
        transclude: true,
        link: function (scope, element, attrs) {
        }
    };
});