call a directive's function from a page using ng-click with angularjs

Question

How should I about calling a directive's function from a html page such as index, using ng-click? Here's my directive's code:

            $scope.moreText = function() {
                $(".showMore").append(lastPart);

            };

html:

<a ng-click='moreText()' class='showMore' href='#'>... show more</a>

My problem is that moreText() isn't being called when clicked. I understand that it's not the right $scope. but how do I access it?

Update:

angular.module('myapp').controller('FormTestCtrl', ['$scope', '$timeout', '$window',
        function($scope, $timeout, $window) {


            $scope.moreText = function() {
               console.log("more text function***************");
                    $(".showMore").append(lastPart);
               };
        }
    ]);

Update: #2

Here is most of the directive:

    angular.module('myapp').directive('tooltip', function($window, $timeout) {

        return {

            restrict: 'A',
            replace: false,
            scope: {

                },

                link: function ($scope, element, attrs, $parse, $timeout) {

                    $scope.moreText = function() {};
                    $scope.sb = false;
                    var tooltext = attrs.tooltip;

    ...
                    if (tooltext.length > 10){
                        var firstPart = tooltext.substring(10, 0);
                        var lastPart = tooltext.substring(11, tooltext.length);

                        tooltext = firstPart + "<a ng-click='moreText()' class='showMore' href='#'>... show more</a>";
                    }

                   $scope.tipText = function(){
                        element.append("<div class='tooltip'>"+tooltext+"</div>");
                    };
                    $scope.moreText = function() {
                        console.log("more text function***************");


$(".showMore").append(lastPart);

                };

            }

        }
    });

What does " I understand that it's not the right $scope" mean? — charlietfl
– charlietfl, Commented Jul 13, 2016 at 19:54
I understand that I cannot access my function through the $scope because my html isn't inside the same $scopeas my $scope.moreText function. So how can I go about accessing my moreText function from my index.html page? — now_world
– now_world, Commented Jul 13, 2016 at 19:59
Does the "tooltip" attribute get processed by some different directive or css style? Either way, i see that you created a "tooltext" variable, but this variable its not set back to a useful place, like scope or attrs. — Xavero
– Xavero, Commented Jul 18, 2016 at 18:25

Xavero · Accepted Answer · 2016-07-18 21:50:51Z

1

+50

Just appending or changing the element html it´s not enough for angular to bind directives (like ngClick).

This plunk will give a base on how to recompile the HTML of the directive element:

https://embed.plnkr.co/t7qCM48dRyGmwHAZBffs/

The important bit:

element.html(html);
$compile(element.contents())(scope);

This will make angular aware of the ng-click or any new directives you want to insert into the element. I used a watcher, but its just as a sample. If you know your input parameters are not going to change you can get rid of the watcher.

answered Jul 18, 2016 at 21:50

Xavero

3,3991 gold badge17 silver badges17 bronze badges

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

2 Comments

now_world Over a year ago

I need my directive to only work as an attribute. Right now all I have to type is ` <div class="something" tooltip="This is a tooltip..">` any way I could add a "show more" to this attribute?

Xavero Over a year ago

This plunker its doing that. The difference its the directive name: in the plunker i called my-tooltip, but you can call just tooltip. In the plunker i replaced the element text, but you can easily call some other method, like append a DIV with the full text. Now, about the "show more" text, this probably must be in the DIV you will show as tooltip.

Shlomi Haver · Accepted Answer · 2016-07-13 19:10:28Z

0

In order to call a function you declared on your $scope you must nest the ng-click inside the controller that this $scope is part of.

For example:

myApp.controller('ExampleController', ['$scope', function($scope) {
  $scope.moreText = function() {
       $(".showMore").append(lastPart);
   };
}]);

<div ng-controller="ExampleController">
  <a ng-click='moreText()' class='showMore' href='#'>... show more</a>
</div>

answered Jul 13, 2016 at 19:10

Shlomi Haver

9749 silver badges14 bronze badges

2 Comments

now_world Over a year ago

My function is inside a directive and get's the lastPart variable from other functions inside the directive, I'm assuming that placing the function inside the controller won't change anything? I also did what you said, but the moreText function is still not being called.

now_world Over a year ago

Here you go. Thanks

rob · Accepted Answer · 2016-07-19 15:34:48Z

0

You can pass your directive's function out through a binding. e.g.

app.directive('tooltip', function() {
  return {
    scope: {
      showMore: '='
    },
    link: function(scope) {
      scope.showMore = function() {
        console.log('Show More!');
      };
    }
  };
})

And call it from outside the directive like this

<button ng-click="show()">Show More</button>
<div tooltip show-more="show"></div>

https://plnkr.co/edit/Rs5d2wCtLzTJI8FNXb0h?p=preview

answered Jul 19, 2016 at 15:34

rob

18.7k13 gold badges73 silver badges95 bronze badges

Collectives™ on Stack Overflow

call a directive's function from a page using ng-click with angularjs

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related