事件未绑定到角度指令中的元素

Question

我正在Angular中开发一个应用程序，并且在通过指令引入元素时，ng-click没有绑定到该元素而遇到了障碍。 这基本上是一个目标规划应用程序，本节介绍了实现目标时遇到的障碍。 本节包含一个障碍，一个解决方案和一个操作步骤（与此相关联的日期和委托字段。）但是每个障碍可以有多个解决方案，并且每个解决方案可以具有多个操作步骤。 因此，存在“加号”标志，用户可以单击以分别添加解决方案或操作步骤。

看起来很简单，我可以在jQuery的控制器中完成此操作，但是从我的角度来看，所有DOM操作都应在Directive中进行。

因此，我为Obstacle创建了一个指令（以为还会复制需要重复的零件的解决方案和操作步骤指令）。

因此，现在对它进行了设置，以便当您单击加号之一时，它会传递一个要记录在控制台中的字符串，以查看其是否正常工作。 不是。

该指令将模板拉入应用程序并在DOM中显示，但是ng-click事件不会触发测试。 我的猜测是事件未附加到元素上。

在过去的几天中，我一直在搜寻Internet上寻找解决方案，而我发现将事件附加到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(){});
        //}
    };
}]);

控制器：

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



}]);

模板文件：

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

在此先感谢您的帮助！

Answer 1

看来您的控制器未连接到该指令：

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

另外，您还需要确保已将其声明为ng-module中的控制器

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