angularjs指令将某些东西附加到dom html值

我想添加一些东西到现有元素的html值。例如angularjs指令将某些东西附加到dom 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) { 
     } 
    }; 
});

似乎链接功能里面， element.text（）获取

<span>Else</else>

那么我怎样才能得到一个按钮的原始文本值并追加新的字符串呢？

------------- UPDATE --------------

所有我想知道的是，我怎么可以重用现有的文本在我的指令中的元素。

来源

2014-06-23 CIF

我只是想知道我怎么能拉元素的文字，并在模板中重复使用。 – CIF

Button已经是一个html元素，所以你不能做出一个指令。我建议像我的按钮，而不是。此外，我将限制改为'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="[email protected]" 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>

和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) { 
     } 
    }; 
});

OK，您提供的其他信息，我想你想内使用transclude指示。然后，该代码看起来像这样（working plunker demo）：

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

和JavaScript：

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

来源

2014-06-23 18:04:21 zszep

我知道如何做到这一点。但我想要的是扩大现有的DOM以获得更多功能。你打开了“Button已经是一个html元素了，所以你不能做出一个指令。”< - 实际上是错误的。您可以从现有的HTML元素中制定指令。许多angularjs插件都是通过这种方式为现有的DOM提供内置功能。 – CIF

好的，根据您的额外信息，我已经扩展了我的答案，其中包括使用“transclusion”。我想这是你想要的。如果没有，请告诉我。 – zszep

ng-transclude！是啊！谢谢~~~！ – CIF

angularjs指令将某些东西附加到dom html值

回答

相关问题