2014-01-29 2 views
0

Я работаю с директивой, которая является всего лишь оберткой для виджета для поиска по бесплатному сайту (jquery). Это первая директива, которую я пробовал сделать, и у меня возникают некоторые проблемы.Передача хотя атрибута в директиве Angularjs

Желаемая функциональность: 1. способность передавать на языке (две буква коды) для отображения результатов поиска в качестве атрибута 2. возможности определить функцию, которая будет вызываться при выборе пункта (проходными данных выбора)

У меня есть установка a plunkr with the directive here. Второй бит функциональности работает очень хорошо, но у меня проблемы с языковым требованием, и я не уверен, почему.

Передача в коде языка отлично работает, когда делать это статически (не интерполированное):

if(attrs.lang){ 
    language = attrs.lang; 
} 

Но я не могу заставить его работать при попытке передать значения, как это:

attrs.$observe('lang', function(value) { 
     if(value === ""){ 
      language = 'en'; 
     } else { 
      console.log("lang val " + value); 
      language = value; 
     } 
}); 

Любая идея, почему это не работает? Любой совет будет принят во внимание.

директива, как она стоит:

directive('suggest', function($http) { 
    var language; 
    return { 
     restrict: 'E', 
     template: "<input type='text'>", 
     replace:true, 
     scope:{ 
      selectData:'=', 
      onSelect:'&' 
     }, 
     link: function(scope, element, attrs) { 

      attrs.$observe('lang', function(value) { 
       if(value === ""){ 
        language = 'en'; 
       } else { 
        console.log("lang val " + value); 
        language = value; 
       } 
      }); 

      if(attrs.lang){ 
       language = attrs.lang; 
      } 


      $(element).suggest({ 

       "lang": language 
      }) 
      .bind("fb-select", function(e, info) { 
       console.log(info); 
       scope.onSelect({data:info}); 
       console.log("language: " + language); 
       scope.$apply(function(){ 
        console.log("hello apply here"); 
        scope.selectData = info; 
       }); 
      }); 
     } 
    }; 
}); 

ответ

1

Это не ясно из Вашего вопроса, но я думаю, что вы имеете в виду следующую проблему: когда в plunker демо я типа «FR» на языке, а затем ввести что-то чтобы предлагать поле, он получает результаты для языка «en».

Это потому, что вы уже инициализировали плагин с языком по умолчанию (en). Функция, предоставляемая функции $observe, не называется прямо здесь - она ​​будет вызываться позже, после инициализации вашей директивы. Поэтому, когда язык изменяется, вам нужно повторно инициализировать плагин suggest.

Я не уверен, что это правильный способ сделать это, так как я не знаком с этим плагином, но, по крайней мере, следующее изменение работает - только что добавили повторная инициализация в $observe слушателя:

attrs.$observe('lang', function(value) { 
     console.log("lang val " + value); 
     language = value; 
     $(element).suggest({lang: language}); 
    }); 
+0

Это идеальное решение. Большое спасибо за вашу помощь GRaAL. Я не признал код предложения в качестве инициализации и думал, что он запускается каждый раз. Очень признателен! :) – bornytm

+0

Нет, метод 'link' вызывается один раз для каждого элемента, который имеет эту директиву. Используйте прослушиватели событий, '$ watch' или' $ watch', чтобы реагировать на события или изменения. – GRaAL

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