Угловая директива: вернуть объект из коллекции

Question

Я пытаюсь реализовать пользовательскую директиву, которая перечисляет все доступные планы и позволяет пользователю выбирать один.

При выборе плана, родительский охват должен быть обновлен с выбранным объектом (это связанно с два способом связывания)

Он должен вести себя точно так же, как и угловые нг-опции делает, но у меня есть жесткий бой времени замена объекта Javascript.

То, что я сейчас работает (с некоторым беспорядком удалены):

В HTML:

<choose-plan ng-model='plan' plans='plans' choose-plan-title='Premium plans' /> 

В контроллере:

$scope.plan = {} 
Plans.get (resource) -> 
    $scope.plans = resource.plans 
    return 

Он не работает с $scope.plan = undefined очевидно, но Я ищу решение, которое делает.

В JS (CoffeeScript) директивы:

angular.module('tv-dashboard').directive 'choosePlan', [ 
    'lodash' 
    (lodash) -> 
    'use strict' 
    restrict: 'E' 
    scope: 
     plan: '=ngModel' 
     plan_collection: '=plans' 
     title: '@choosePlanTitle' 

    link: (scope, element, attrs) -> 
     # HACK two way binding does not replace the value. Investigate 
     scope.choosePlan = (available_plan) -> 
     # scope.plan = available_plan # Does NOT update the parent scope binded ng-model 
     angular.copy available_plan, scope.plan 
     return 

     scope.isSelected = (available_plan) -> 
     return unless available_plan? 
     available_plan.id == scope.plan.id 

     presentPlans = (collection) -> 
     angular.copy(collection).map (resource_plan) -> 
      price_parts = resource_plan.interval_price.split '.' 
      resource_plan['integer_price'] = price_parts[0] 
      resource_plan['decimal_price'] = price_parts[1] 
      resource_plan 

     chooseDefaultPlan = (collection) -> 
     scope.choosePlan lodash.last collection 

     unWatchCollection = scope.$watch 'plan_collection', (collection) -> 
     return unless collection? && collection.length > 0 

     scope.plans = presentPlans collection 
     chooseDefaultPlan scope.plans 

     unWatchCollection() 
     return 
     return 
    templateUrl: 'form/choose_plan.html' 
] 

Но если вы посмотрите на функцию isSelected, вы заметили, что я должен сравнивать объекты, используя поле идентификатора. Сравнение по == (=== в JS) не возвращает true.

Есть ли способ заменить родительскую область plan без танца с angular.copy available_plan, scope.plan и вынужден использовать сравнение полей id?

Answer 1

Вы должны использовать require: 'ngModel' для ввода модели, прикрепленной к элементу или его родительскому элементу, к которому привязана директива. Вот demo.

Answer 2

Одним из способов решения этой проблемы заключается в обмене объекта и записи в его свойства

$scope.plan = { 
    // value: set in directive 
} 

scope.choosePlan = (available_plan) -> 
    scope.plan.value = available_plan 
    return 

scope.isSelected = (available_plan) -> 
    return unless available_plan? 
    available_plan == scope.plan.value 

Ваш код как jsfiddle: http://jsfiddle.net/ht6tmhfu/1/
фиксированный код, как jsfiddle: http://jsfiddle.net/ht6tmhfu/3/