hyp*_*erN 8 javascript angularjs jquery-chosen angularjs-directive
我已经按照这个伟大的教程(链接)选择和Angular(代码几乎相同)
这是我的指示:
app.angularModule.directive('chosen', function() {
var linker = function (scope, element, attrs) {
var list = attrs['chosen'];
scope.$watch(list, function () {
element.trigger('chosen:updated');
});
element.chosen({ width: '350px'});
};
return {
restrict: 'A',
link: linker
};
});
Run Code Online (Sandbox Code Playgroud)
这是html:
<select data-placeholder="Choose a Category" multiple class="col-lg-8 chosen-select" chosen="items"
ng-options="item._backingStore.Name for item in items" ng-model="selectedCategories" >
</select>
Run Code Online (Sandbox Code Playgroud)
我想要的是,当用户点击编辑按钮时,弹出模态窗口,并在模态窗口中选择在单击编辑按钮之前选择的类别.
这是控制器的一部分:
$scope.$watch(function() { return adminCrudService.getCategoriesForUpdate(); }, function() {
$scope.action = "edit";
$scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
if ($scope.categoriesForUpdate.length > null) {
$scope.selectedCategories = _.filter($scope.items, function (item) {
return _.contains($scope.categoriesForUpdate, item);
});
}
});
Run Code Online (Sandbox Code Playgroud)
我已经记录了 $ scope.selectedCategories,一切都很好,但由于某些原因,没有选择任何选择.
那么我做错了什么,我该如何解决呢?
编辑
我注意到当我选择一些项目,关闭模态,再次打开它,选择的值再次前夕虽然我把这条线放在$ watch里面
$scope.selectedCategories = "";
Run Code Online (Sandbox Code Playgroud)
编辑2
所以我暂时搁置了这个问题,因为我有更重要的事情需要处理.我尝试过没有选择,即使用"普通"选择和代码工作.因此,我所选择的指令最终无法正常运作.
hyp*_*erN 11
我已经解决了,实际上解决方案非常简单明了(当你了解Angular指令的工作原理时).这是指令的完整代码:
app.angularModule.directive('chosen', function() {
var linker = function (scope, element, attrs) {
var list = attrs['chosen'];
scope.$watch(list, function () {
element.trigger('chosen:updated');
});
scope.$watch(attrs['ngModel'], function() {
element.trigger('chosen:updated');
});
element.chosen({ width: '350px'});
};
return {
restrict: 'A',
link: linker
};
});
Run Code Online (Sandbox Code Playgroud)