Я работаю над директивой создания пользовательского раскрывающегося списка. Мне удалось привести код директивы, чтобы заменить его.Как связать значение с директивой angularjs?
Ниже директива теги в html
<dropdown placeholder="Country.." list="count" selected="item" property="name"></dropdown>
Ниже приведен шаблон HTML, который заменяет дИРЕКТИВУ тег
<div class="dropdown-container" ng-class="{ show: listVisible }">
<div class="dropdown-list">
<div>
<div ng-repeat="item in list" ng-click="select(item)" ng-class="{ selected: isSelected(item) }">
<span>{{property !== undefined ? item[property] : item}}</span>
<i class="fa fa-check"></i>
</div>
</div>
</div>
Ниже приводится angularjs директивы
App.directive("dropdown", function ($rootScope) {
return {
restrict: "E",
templateUrl: "/app/dropdownTemplate.html",
scope: {
placeholder: "@",
list: "=",
selected: "=",
property: "@"
},
link: function (scope) {
scope.listVisible = false;
scope.isPlaceholder = true;
scope.select = function (item) {
scope.isPlaceholder = false;
scope.selected = item;
};
scope.isSelected = function (item) {
return item[scope.property] === scope.selected[scope.property];
};
scope.show = function() {
scope.listVisible = true;
};
$rootScope.$on("documentClicked", function (inner, target) {
console.log($(target[0]).is(".dropdown-display.clicked") || $(target[0]).parents(".dropdown-display.clicked").length > 0);
if (!$(target[0]).is(".dropdown-display.clicked") && !$(target[0]).parents(".dropdown-display.clicked").length > 0)
scope.$apply(function() {
scope.listVisible = false;
});
});
scope.$watch("selected", function (value) {
scope.isPlaceholder = scope.selected[scope.property] === undefined;
scope.display = scope.selected[scope.property];
});
}
}
});
Я пытаюсь получить список стран с другого контроллера функция которого заключается в следующем,
addressService.getCountries().success(function (response) {
angular.copy(response, $scope.list);
}
Как связать значения из контроллера в моей директиве при загрузке страницы?
EDIT: Что мне делать, когда директива загружается до того, как вызвана функция addressService.getCountries()
?
Просто связывают '$ scope.list' в другое свойство в вашей директиве' scope {} 'с использованием двусторонней привязки (' = ')? –
Используйте услугу для передачи данных – Kailas
@NexusDuck Не могли бы вы рассказать подробнее? Я не может понять, как добавить свойство 'рамки {}' – Rai