Question

以下是我的Pagination Directive

angular.module('frontendApp')
    .directive('postsPagination', function() {
        return{
            restrict: 'E',
            template: '<ul class="pagination">'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(1)">&laquo;</a></li>'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(currentPage-1)">&lsaquo; Prev</a></li>'+
            '<li ng-repeat="i in range" ng-class="{active : currentPage == i}">'+
            '<a href="javascript:void(0)" ng-click="getList(i)">{{i}}</a>'+
            '</li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(currentPage+1)">Next &rsaquo;</a></li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(totalPages)">&raquo;</a></li>'+
            '</ul>'
        };
    });

我希望ng-click中的函数名称是动态的我：e ng-click = getList

Answer 1

看看这个：https://jsfiddle.net/n9KNv/14/

使用$ compiler进行角度解释ng-click in指令。喜欢这个

angular.module('frontendApp')
    .directive('postsPagination', function(){
        return{
            restrict: 'E',
            template:  $compile('<ul class="pagination">'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(1)">&laquo;</a></li>'+
            '<li ng-show="currentPage != 1"><a href="javascript:void(0)" ng-click="getList(currentPage-1)">&lsaquo; Prev</a></li>'+
            '<li ng-repeat="i in range" ng-class="{active : currentPage == i}">'+
            '<a href="javascript:void(0)" ng-click="getList(i)">{{i}}</a>'+
            '</li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(currentPage+1)">Next &rsaquo;</a></li>'+
            '<li ng-show="currentPage != totalPages"><a href="javascript:void(0)" ng-click="getList(totalPages)">&raquo;</a></li>'+
            '</ul>');
        };
    });

Answer 2

您可以使用javascript eval()方法。

eval函数可以动态执行JavaScript源代码。

要将您的函数名称字符串转换回javascript表达式，可以使用eval()方法，如下所示：

var dateFn = "Date(1971,3,8)";
var myDate;
eval("myDate = new " + dateFn + ";");

document.write(myDate);

// Output: Thu Apr 8 00:00:00 PDT 1971

MSDN reference

Answer 3

directive.html

<ul class="pagination">
<li ng-show="currentPage != 1">
    <a href="javascript:void(0)" ng-click="getList(1)">&laquo;</a></li>
<li ng-show="currentPage != 1">
    <a href="javascript:void(0)" ng-click="getList(currentPage-1)">&lsaquo; Prev</a></li>
<li ng-repeat="i in range" ng-class="{active : currentPage == i}">
    <a href="javascript:void(0)" ng-click="getList(i)">{{i}}</a></li>
<li ng-show="currentPage != totalPages">
    <a href="javascript:void(0)" ng-click="getList(currentPage1)">Next &rsaquo;</a></li>
<li ng-show="currentPage != totalPages">
    <a href="javascript:void(0)" ng-click="getList(totalPages)">&raquo;</a></li>

controller1.js

angular
    .module('frontendApp')
    .controller('Ctrl1', function(){
       $scope.getList = function(){} // your implementation 1 here 
    });

controller2.js

angular
.module('frontendApp')
.controller('Ctrl2', function(){
   $scope.getList = function(){} // your other implementation here 
});

现在在两个地方都使用相同的html文件，只需更改控制器名称，ypu就可以为同一个函数设置不同的实现，从而重用模板：

angular.module('frontendApp')
.directive('postsPagination', function() {
    return{
        restrict: 'E',
        templateUrl: 'directive.html',
        controller: 'Ctrl1'
    };
});
angular.module('frontendApp')
.directive('someOther', function() {
    return{
        restrict: 'E',
        templateUrl: 'directive.html',
        controller: 'Ctrl2'
    };
});

AngularJS指令中的动态函数名称

3 个答案: