Question

我正在使用Angular中的应用程序，并且当通过指令引入该元素时，ng-click没有绑定到该元素。这基本上是一个目标规划应用程序，本节讨论了在实现目标时遇到的障碍。此部分有一个障碍，一个解决方案和一个操作步骤（与此相关联的日期和委托字段。）但每个障碍可以有多个解决方案，每个解决方案可以有多个操作步骤。所以有＆＃34;加＆＃34;表示用户可以分别单击以添加解决方案或操作步骤。

看起来很简单，我可以使用jQuery在控制器中执行此操作，但是从我关于Angular的阅读中，所有DOM操作都应该在指令中进行。

所以我为障碍物创建了一个指令（考虑到还需要解决哪些部分需要复制的解决方案和行动步骤指令）。

所以现在它被设置为当你点击其中一个加号时，它会传递一个字符串以便在控制台中登录，只是为了查看它是否正常工作。不是。

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

过去几天我一直在寻找互联网，试图找到一个解决方案，而我在将事件附加到指令中所发现的一切都没有解决这个问题（也许我已经解决了什么问题。）＆＃39;发生了......）

无论如何，这是代码：

指令：

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

不与Angular Directives

1 个答案: