Question

我想知道如何在模板元素的ng-click事件中调用驻留在控制器中的函数。我必须在许多页面中使用此指令。因此我需要在各个控制器页面中处理click事件。下面的代码调用驻留在指令中的click函数（moreitemdetails）。我尝试将范围设置为moreitemdetails: '='。它也无法正常工作。

我一直在使用指令

app.directive('groceryList', function){

    return {
        restrict: 'E',
        scope: {
            array: '=',
            listItemClick:'&',
            moreitemdetails: '&', 
        },
        templateUrl: 'list.html',

        link: function(scope, element, attrs) {
            scope.label = attrs.label;
            scope.listItemClick=function(e){
                $(e.currentTarget).find('.next-items').slideToggle('fast');   
            }
             scope.moreitemdetails=function(name,type){
               //other code
             }
        }
    };
});

指令的调用是

<grocery-list array="items"></grocery-list>

这是模板文件

<div ng-click="listItemClick($event)">
        <div>
            <div class="item">
                <span class="item-details">
                    {{array[0].Item}}

                </span>
                <span class="down-arrow"></span>
            </div>
            <div class="next-items">
                <ul>
                    <li class="item" ng-repeat="list in array">
                        <div class="item-details" ng-click="moreitemdetails(list.Name,list.Type)">{{list.Item}}</div>
                    </li> 
                </ul>
            </div>

有办法绕行吗？

我也想知道在另一个指令中使用$ location。引用前面的示例（除了指令定义和moreitemdetails（）中的操作之外，所有内容都相同）

app.ui.directive('groceryList', ['$location', function(location){
return {
            restrict: 'E',
            scope: {
                array: '=',
                listItemClick:'&',
                moreitemdetails: '&', 
            },
            templateUrl: 'list.html',

            link: function(scope, element, attrs) {
                scope.label = attrs.label;
                scope.listItemClick=function(e){
                    $(e.currentTarget).find('.next-items').slideToggle('fast');   
                }
                 scope.moreitemdetails=function(name,type){
                   $location.path('/home/');
                 }
            }
        };
}]);

提前致谢

Answer 1

通过声明

   scope: {
        array: '=',
        listItemClick:'&',
        moreitemdetails: '&', 
    },

您正在为指令创建一个独立的范围。一种解决方案可能是不在您的指令中声明此范围。这意味着您的ng-click =“moreitemdetails（list.Name，list.Type）将触发控制器范围上的功能。

或者，您可以使用发射和侦听器。为此，您可以在指令中调用：

scope.moreitemdetails=function(name,type){
   var deets = {
       name: name,
       type: type
    };
    scope.emit('moreitemdetails',deets)
}

然后在各种控制器中实现：

scope.$on('moreitemdetails',function(event,details){
// do some code with your name and type
}

我不确定你想知道关于$ location的确切内容，如果你可以更具体一些，我可以帮助更多。

希望这在某种程度上有所帮助！

编辑：没有声明任何范围的指令将如下所示：

 return {
    restrict: 'E',
    templateUrl: 'list.html',
    link: function(scope, element, attrs) {
        scope.label = attrs.label;
        scope.listItemClick=function(e){
            $(e.currentTarget).find('.next-items').slideToggle('fast');   
        }
         scope.moreitemdetails=function(name,type){
           //other code
         }
    }
};

单角度js指令和许多控制器

1 个答案: