AngularJS searchbox指令或如何避免控制器中的代码重复

时间:2014-07-15 09:30:25

标签: javascript angularjs angularjs-directive

我正在研究多个学校学生管理申请。有多种角色:学校经理和超级经理。 学校经理只能在学校里搜索学生,而超级经理可以在所有学校中搜索学生。

因为仅在第二种情况下删除了学校ID,所以我认为可以使用相同的搜索框,并且可以使用相同的搜索功能。

这是模板:

<div class="input-group">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default" tabindex="-1">{{ searchBy | translate }}</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li ng-repeat="value in searchByFields"><a ng-click="searchByAttr(value)">{{ value | translate }}</a></li>
        </ul>
    </div>
    <form ng-submit="search(searchValue)">
        <input type="text" 
            ng-model="searchValue"  
            class="form-control" 
            placeholder="Search.." />
    </form>
    <span class="input-group-btn">
        <button class="btn btn-warning" type="button">
            <i class="fa fa-search fa-fw"></i>
        </button>
    </span>
</div>

这是控制器范围函数和变量,用于搜索:

$scope.searchBy = 'cn';
$scope.searchByFields = ['cn', 'ou', 'o'];

$scope.searchByAttr = function (value) { 
    $scope.searchBy = value;
}

var searchFn = function (params) {
    User.search(params).success(function (data) {
        $scope.students = data.results;
        $scope.collapsedTableRows = [];
        _.each($scope.students, function () {
            $scope.collapsedTableRows.push(true);
        });
    }).error(function (reason) {
        $scope.students = [];
        $scope.collapsedTableRows = [];
        var log = Logger.getInstance("AdminController(searchFn)");
        var error = reason[0];
        log.error('name - \"{0}\", location - \"{1}\", error - \"{2}\"',
            [error.name, error.location, error.description]);
    });
}

$scope.search = function (value) {
    if(value) {
        var params = {
            search: [
                {attr: 'orgId', value: $injector.get('ORG_DN').replace('%id%', $scope.schoolId) },
                {attr: $scope.searchBy, value: '*' + value + '*' }
            ]
        };
        searchFn(params);
    }
}

如您所见,我的搜索结果存储在范围变量中,这些变量在table指令中使用。我在两个控制器中有相同的代码,这很烦人。 我应该如何从搜索结构中构造指令,以便我可以将范围变量传递给指令并从中获取数据,以使我的其他指令正常工作?

1 个答案:

答案 0 :(得分:1)

创建角度服务:Source Tutorial

您的工厂可以包含在一个地方操作的数据,但它也有常见的操作。在创建控制器时,它可以通过控制器。

var app = angular.module('app', []);

app.service('MathService', function() {
    this.add = function(a, b) { return a + b };
    this.subtract = function(a, b) { return a - b };
    this.multiply = function(a, b) { return a * b };
    this.divide = function(a, b) { return a / b };
});

app.service('CalculatorService', function(MathService){
    this.square = function(a) { return MathService.multiply(a,a); };
    this.cube = function(a) { return MathService.multiply(a, MathService.multiply(a,a)); };
});

app.controller('CalculatorController', function($scope, CalculatorService) {
    $scope.doSquare = function() {
        $scope.answer = CalculatorService.square($scope.number);
    }
    $scope.doCube = function() {
        $scope.answer = CalculatorService.cube($scope.number);
    }
});