angularjs directive to append something to dom html value

Question

I want to add something to existing element's html value. For example

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

I want this to be shown as

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

Code what i expect to be is something like below ,,,,

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

Seems inside link function, element.text() gets

<span>Else</else>

So how can i get the original text value of a button and append new string to it?

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

All I wanted to know is how i can reuse existing text on the element in my directive.

I just wanted to know how I can pull element's text and reuse it in the template. — CIF
– CIF, Commented Jun 24, 2014 at 1:24

zszep · Accepted Answer · 2014-06-24 05:58:38Z

1

Button is already a html element, so you can't make a directive out of it. I suggest something like my-button instead. Also, I changed restrict to 'A' as I am using the directive as an attribute. So something like this would work:

The 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>

and the 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, on the additional information you provided, I suppose you want to use transclude within the directive. The code would then look like this (working plunker demo):

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

and the javascript:

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

edited Jun 24, 2014 at 5:58

answered Jun 23, 2014 at 18:04

zszep

4,4935 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CIF Over a year ago

I know how to do it this way. But what I want was to expand the existing DOM to have more features. You're stmt "Button is already a html element, so you can't make a directive out of it. "<-- is actually wrong. You can make directive out of existing HTML element. Many angularjs plugins do it that way to have built-in features to existing DOMs.

zszep Over a year ago

OK, upon your additional info, I have expanded my answer which includes the use of "transclusion". I guess this is what you want. If not, let me know.

CIF Over a year ago

ng-transclude ! Yeah! Thank you~~~!

Collectives™ on Stack Overflow

angularjs directive to append something to dom html value

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related