Events not binding to elements in Angular Directives

Question

I'm working on an app in Angular and have hit a snag with ng-click not binding to the element when it's being brought in via a Directive. This is basically a goal planning app and this section deals with the obstacles that one has when working on their goal. This section has an obstacle, a solution and an action step(with a date and delegation field associated with this.) But each obstacle can have multiple solutions and each solution can have multiple action steps. So there are "plus" signs that the user can click to add a solution or action step, respectively.

Seems simple enough and I can do this in the controller with jQuery, but from waht I'm reading about Angular all DOM manipulation should take place in the Directive.

So I created a directive for the Obstacle(with the thoughts that there will also be Solution and Action Step directives for what parts need to be duplicated).

So now it is set up so that when you click one of the pluses, it passes a string to be logged in the console, just to see if it's working. It's not.

The directive is pulling the template into the app and displaying in the DOM, but the ng-click events are not firing the test. My guess is that the event is not being attached to the element.

I've spent the past few days scouring the interweb trying to find a solution and everything I found on attaching events into a Directive has not solved this (and maybe I'm way off on what's happening....)

Anyway, here is the code:

Directive:

app.directive('newObstacle', [function(){


     return {
        // name: '',
        // priority: 1,
        // terminal: true,
        scope: {}, // {} = isolate, true = child, false/undefined = no change
        // controller: function($scope, $element, $attrs, $transclude) {},
        // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
        restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
        // template: '',
        templateUrl: 'views/obstacles-temp.html',
        // replace: true,
        // transclude: true,
        //compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
        //link: function($scope, iElm, iAttrs, controller) {
            //angular.element('.fa').bind('click', function(){});
        //}
    };
}]);

The Controller:

app.controller("newGoalCtrl",[ '$scope', function($scope){
    //this.myGoals = goals;
    $gp = jQuery;

    $scope.addNew = function(addEl){

        switch(addEl){

            case 'affirmation':
                var parent = '#gp_affirmations';
                 console.log(parent);
                break;

            case 'obstacle':
                var parent = '#gp_obstacles';
                 console.log(parent);

                break;

            case 'solution':
                var parent = '#gp_solutions';
                 console.log(parent);

                break;

            case 'action':
                var parent = '#gp_actions';
                 console.log(parent);
                break;          

        }
        //$gp(parent).append(childEl);



    }


    $scope.saveGoal = function(goal){

        /*
            Goal Object schema
            Obstacle > Solution > Action
            goal = {
                    'name': '',
                    'description': '',
                    'rewards': '',
                    'consequenses': '',
                    'target-date': '',
                    'todays-date': today,
                    'obstacle' : [{
                        'obstacle-name' : '',
                        'solution'      : {
                            'solution-name' : '',
                            'actions'       : {
                                'action-name'   : '',
                                'target'        : '',
                                'delegate'      : ''
                            },

                        }//solutions
                    }]//obstacle
                };  //goals_meta
                */

        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd='0'+dd
        } 

        if(mm<10) {
            mm='0'+mm
        } 

        goal.today = mm+'/'+dd+'/'+yyyy;





            console.log(goal);

            //saveGoalToDB(newGoal);
        }



}]);

The Template File:

<div class="obstacle">
    <p><label>Obstacle: </label><input type="text" ng-model="goal.obstacle_0" placeholder="If I don't complete, I will..." required / ></p>
    <div id="gp_solutions">
        <header class="section-headings">
            <h3 class="inline"><i class="fa fa-cog green"></i> Obstacle Resolution</h3>
            <span class="inline new"><i class="fa fa-plus-circle green" ng-click="addNew('solution')"></i></span><span class="inline close"><i class="fa fa-times-circle red"></i></span>
        </header>   
        <section class="solutions">
            <p><label>Obstacle Solution: </label><input type="text" ng-model="goal.obstacles_solution_0_0" class="obst1-sol" placeholder="If I don't complete, I will..." required / ></p>
            <div id="gp_actions">
                    <header class="section-headings">
                        <h3 class="inline"><i class="fa fa-bolt yellow"></i> Obstacle's  Action Steps</h3>
                        <span class="inline new"><i class="fa fa-plus-circle green" ng-click="addNew('action')"></i></span><span class="inline close"><i class="fa fa-times-circle red"></i></span>
                    </header>       
                    <section class="action">
                        <p><label>Step: </label><input type="text" ng-model="goal.obstacles_solution_actions_0_0_0" class="obst1-as" placeholder="One step I will do to complete this goal..." required / ></p>
                        <p><label>Target Date: </label><input type="date" ng-model="goal.obstacles_solution_target_0_0_0" required /></p>
                        <p><label>Delegate: </label><input type="text" ng-model="goal.obstacles_solution_delegate_0_0_0" placeholder="I will delegate this too..." required / ></p>
                    </section>
            </div>
        </section>
    </div>

Thanks in advance for any help!!

Answer 1

It doesn't seem that your controller is wired up to the directive:

 return {
    controller: 'newGoalCtrl',
    restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
    templateUrl: 'views/obstacles-temp.html',
};

Also you need to make sure that you have this declared as a controller in your ng-module

app.controller('newGoalCtrl', <your controller function or reference here>)