Блог

Я создал directive в AngulrJS.

Ниже мой sample.html

 <uservalue user="user.userlist" change-user='user()'></uservalue >
  

ниже приведена моя библиотека пользовательских значений

 app.directive('uservalue ', function() {
    return {
        scope: {
            user:'=',
            changeUser: 'amp;',
            readonly: '@',
            valueChange: '='
            isClickable: '@'
        },
        restrict: 'AE',
        replace: true,  
        templateUrl: 'app/partials/template.html',
    });
}
  

отсюда оно перенаправляется на template.html
Ниже мой template.html

 <select><option value="">Choose user</option>
<option id = "username" data-ng-repeat="c in user" value="{{c.key}}">{{c.value}} </option>
</select> 
  

Я могу отобразить всех пользователей в sample.html раскрывающемся списке, и при изменении значения в раскрывающемся списке оно переходит в другой js, т. е. user() . Теперь мое требование заключается в том, что я должен отправить выбранное значение из выпадающего списка в user() функцию js.

Есть предложения!!!

Прежде всего, вы можете сделать гораздо больше с вашими <select> s.
Вместо использования <option ng-repeat="...">... вы можете использовать ngOptions и привязать свою модель к любому объекту (не только к строкам, как с «обычными» <select> -ами).
Например.:

 <select ng-model="selectedKey" ng-options="user.key as user.value for user in users"
    <!-- Optionally add a `null` option -->
    <option value="">Choose user</option>
</select>
  

Если вы хотите запускать функцию при каждом изменении выбранного элемента, вы можете использовать ngChange .
Кроме того, если вы хотите передать аргументы функции, привязанной к вашей изолированной области с помощью amp; , вы должны вызвать функцию, передающую объект вида: {argName1: argValue1, ...} .

Например.:

 <!-- In the VIEW -->
...change-user="setUser(userKey)"...

/* In the DIRECTIVE's SCOPE */
...
changeUser = 'amp;'

<!-- In the DIRECTIVE's TEMPLATE -->
<select ng-model="selectedKey" ... ng-change="changeUser({userKey:selectedKey})">
    ...
  

Смотрите также эту короткую демонстрацию.