如何使控制器在指令中触发一个函数(Controller take to directive)

时间:2014-07-24 13:05:55

标签: javascript jquery angularjs angularjs-directive

在角度js中我试图在HTTP响应返回成功时删除按钮,在控制器中进行HTTP调用,并且它们是删除ui的指令。那么如何让控制器在指令中触发一个函数。

angular.module("AccApp").directive('transaction',['Session', function(Session){
    return{
        restrict:'E',
        replace:'true',
        scope:{
            transaction:'=',
            delete:'&',
            confirm:'&',
            edit:'&'
        },
        templateUrl:"Partials/transaction.html" ,
        controller:'TransactionFileController',



        link: function(scope,element,attributes,controller){
           //variable to trace the state of content
            scope.contentDisplayed=false;
            var x ="mmmm";            
            if(Session.get_user_role() != true || scope.transaction.Confirmed == true){
                element.find('#confirm').remove();
            }

            if(Session.get_user_id() != scope.transaction.UserID && Session.get_user_role() != true){
                element.find('#delete').remove();
                element.find('#edit').remove();
            }

            element.find('.transaction-trigger').on("click",function(){
                //display and hide the transaction content
                element.find(".transaction-details").toggle(400);

                 scope.contentDisplayed=! scope.contentDisplayed;
                //request conent from server
                if( scope.contentDisplayed)
                {
                   scope.GetTransThumbs(scope.transaction.TrnID);
                }

            });


            if(scope.transaction.TrnType===true)
                {element.find('#type').html("+");}
            else if(scope.transaction.TrnType===false)
                {element.find('#type').html("-");}
        } 

    }

}]);

<div ng-repeat="trn in group.Transactions" >    
                            <transaction thumbnails="thumbnails" transaction="trn" edit="editTrns(trn)"  delete="deleteTrns(trn)" confirm="confirmTrns(trn.TrnID)"> </transaction> 
</div>

1 个答案:

答案 0 :(得分:1)

老实说,我还没有浏览过你的所有代码。无论如何,在控制器的指令中执行函数的最常见方式是这样实现的:

(因为你已经使用了一个孤立的范围,它会让事情变得更容易)

未经审查的代码

<强>指令

    angular.module('myapp').directive('myDirective',function(){

       return {
           restrict:'E,A',
           replace: true,
           templateUrl: 'your template.html path',
           scope:{
             myFunction:'=' // bidirectional binding here...
           },
           link : function(scope,ele,attrs){
             scope.internalCtrl = scope.myFunction || {};
             scope.internalCtrl.directiveFunction = function(){ do stuff }
           }
       }
    });

<强>控制器

    angular.module('myController',function($scope){

        $scope.controllerFunction = {};
    });

<强> HTML

     <button ng-click="controllerFunction.directiveFunction()">Click me to call the directive function!</button>
     <div my-directive my-function="controllerFunction"></div>