2016-06-14 3 views
1

Я работаю над директивой создания пользовательского раскрывающегося списка. Мне удалось привести код директивы, чтобы заменить его.Как связать значение с директивой 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()?

+0

Просто связывают '$ scope.list' в другое свойство в вашей директиве' scope {} 'с использованием двусторонней привязки (' = ')? –

+0

Используйте услугу для передачи данных – Kailas

+0

@NexusDuck Не могли бы вы рассказать подробнее? Я не может понять, как добавить свойство 'рамки {}' – Rai

ответ

0

вы можете сделать завод, который будет полезен в течение проекта, чтобы сделать переменную доступной всегда и везде, в любом контроллере или в любой директиве вы хотите использовать эту переменную можно легко получить доступ к

это как мы можем сделать завод,

(function() { 
"use strict"; 
angular.module('dataModule',[]) 
.factory('datafactory',function(){ 
return { 
credentials : {}, 
}; 
}); 
})(); 

После создания этого завода вы можете придать этот модуль в модуле и этот завод в контроллере

всякий раз, когда вы хотите, вы можете использовать это как

addressService.getCountries().success(function (response) { 
datafactory.country = response 
} 

в контроллере

$scope.myvar =datafactory.country 

в будущем использовать этот завод для любой такой переменной, которая будет доступна во всем мире, например, вы хотите сохранить список состояния глобально

datafactory.state =["abc","def","xyz"] 
+0

Благодарим за предложение. Будет реализовывать эту технику с самого начала следующего проекта. – Rai

+0

Можете ли вы уточнить, почему вы возвращаете 'credentials: {},' – Rai

+0

учетные данные бесполезны в этом сценарии, это просто фиктивный объект здесь, что мы возвращаем какой-то объект, мы можем удалить его или оставить его без проблем, это это просто манекен объект здесь даже если мы убираем наш завод будет выглядеть, и он будет работать нормально (функция() { «использовать строгий»; angular.module («DataModule», []) . завод («datafactory», function() { return { }; }); })(); –

Смежные вопросы