ng-click in angular directive

Question

I cannot figure out why my ng-click inside of my directive will not fire the fooControls clickTest. Why is clickTest not firing and logging to the console? is there a better way of doing this?

Directive

app.directive('fooList', function () {
    return {
        restrict: 'E',
        templateUrl: './app/views/fooList.html',
        scope: { obj: "=" },
        controller: 'fooController',
        controllerAs: 'b'
    };
});

Controler

app.controller('fooController', ['$scope', function ($scope) {
    $scope.obj = [];

    $scope.ClickTest = function (num) {console.log(num);};
}]);

HTML

<div ng-repeat="book in obj" class="container">
    <div class="row">
        <h4 class="pull-right"><button class="btn btn-small" ng-click="b.ClickTest(1)">ClickTest</button></h4>
    </div>
    <br />
</div>

EDIT

The above html is a copy paste of foo-list. The full html is

<html>
<head>
</head>
<body>
<foo-list  obj="searchResults"></foo-list>
</body>
<html

In your example code the <foo-list> tag is not even used... — DanEEStar
– DanEEStar, Commented Mar 25, 2015 at 14:43
Also, why is it b.ClickTest(1). You have ClickTest applied to your scope, it should just be ClickTest(1) — Mark Pieszak - Trilon.io
– Mark Pieszak - Trilon.io, Commented Mar 25, 2015 at 14:44
thank you @mcpDesigns it was the alias that was messing it up. I have this working in another project and the alias was just fine. Anyway removing the alias cleared up the issue. Thank you — gh9
– gh9, Commented Mar 25, 2015 at 14:46

Tui Popenoe · Accepted Answer · 2015-03-25 14:53:39Z

1

Your html should be changed to have the ClickTest function applied directly to the scope, not a variable in the scope. You also need to include a <foo-list /> tag for your directive.

<div ng-repeat="book in obj" class="container">
    <div class="row">
        <!-- Change b.ClickTest(1) to ClickTest(1)-->
        <h4 class="pull-right"><button class="btn btn-small" ng-click="ClickTest(1)">ClickTest</button></h4>
    </div>
    <br />
    <!-- Insert a foo-list tag -->
    <foo-list  obj="searchResults"></foo-list>
</div>

answered Mar 25, 2015 at 14:53

Tui Popenoe

2,1242 gold badges23 silver badges45 bronze badges

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

Collectives™ on Stack Overflow

ng-click in angular directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related