0

I have created an angular directive.

The goal of my directive is to change text of the button that is being clicked.

My problem is that my directive is working with all the buttons of the first/main page, but when I display a popup in my <div ui-view></div> that has a button with this directive, it doesn't work.

app.directive('callbutton', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<button type="button" class="btn btn-block btn-lg btn-success"><i class="fa fa-phone"></i> Call</button>',
        link: function(scope, elem, attrs) {
            elem.bind("click", function{
                elem.text('other text');
            })
        }
    }
});

Thanks in advance.

Gargaroz
  • 313
  • 9
  • 28
Michael T.
  • 187
  • 1
  • 10
  • any errors in console? – Grundy May 18 '15 at 16:04
  • is using a `app.directive` for a `ui-view` (which is also a directive) possible to do? it seems that `$stateProvider.state()` definitions might work instead.. see this discussion on SO: [link](http://stackoverflow.com/questions/22790209/angular-ui-router-ui-views-vs-directives) – Shehryar Abbasi May 18 '15 at 16:11
  • No, I don't have any error on my console. I open my popup with a state in my `ui-router`. But it feel like you can't using a directive in an another directive. – Michael T. May 19 '15 at 07:34
  • works fine for me: http://plnkr.co/edit/SrxIpzudJTv82lGJREDY?p=preview. You also don't need to do `elem.bind("click", ...` - just use `ng-click` and define a function handler and the button name property on the scope. – New Dev May 21 '15 at 07:29

0 Answers0