angular-js重複使用指令與雙向綁定

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

祝你好運！