Question

我正在尝试创建一些不同的指令，这些指令将作为我应用程序不同部分的搜索/过滤工具。

为此，我创建了以下指令代码：

    app.directive("lbFilterDivision", ['divisionService', function (divisionService) {
    return {
        restrict: "E",
        templateUrl: 'tpl/directives/lb-filters/lbFilterDivision.html',
        scope: {
            model: '='
        },
        link: function (scope, element, attr) {
            scope.divisions = [];
            divisionService.getList().then(function (result) {
                scope.divisions = result;
            })
        }
    };
}]);

附加到此的模板是：

<select class="form-control"
    ng-model="model"
    ng-options="item.id as item.name for item in divisions"
    fix-select-null="">
<option value="" translate="FORMS.DIVISION_PLACEHOLDER"></option>

好的，首先让我解释一下主要想法。

这个想法是你有一个search变量将被传递给指令。然后双向绑定应该通过系统通知。

所以说例如我有以下HTML：

<lb-filter-division model="search.division.id"></lb-filter-division>
<li ng-repeat="user in users | filter:search"> </li>

如您所见，我将model =设置为search.division.id，这意味着每次更改所选变量时，都应更新search.division.id变量并过滤列表。

可悲的是，事实并非如此。

有谁能看到我做错了什么？

编辑 - 我找到了答案。显然我的代码中存在语法错误。我很抱歉！如果有人和我的自己有同样的想法，我会把这段代码留在这里。

这是一个小提琴：

fiddle

Answer 1

解决了这个问题。

如果您希望复制或正在寻求解决同样的问题，我可以参考这个小提琴：

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';

    $scope.users = [
        {id: 1, name: "div1", division:{id: 1, name: 'hello'}},
        {id: 2, name: "div2", division:{id: 2, name: 'hello2'}},
        {id: 3, name: "div3", division:{id: 3, name: 'hello3'}}

    ]
}

myApp.directive("lbFilterDivision", function () {
    return {
        restrict: "E",
        scope: {
            model: '='
        },
      template: '<select ng-model="model" ng-options="item.id as item.name for item in divisions"></select>',
        link: function (scope, element, attr) {
            scope.divisions = [{id: 1, name:'hello'},{id: 2, name:'hello2'},{id: 3, name:'hello2'}];
        }
    };
});

fiddle

祝你好运！

angular-js可重复使用的指令，具有双向绑定

1 个答案: