Привязка ng-модели к параметру Service из шаблона - PullRequest
Новая
       23

Привязка ng-модели к параметру Service из шаблона

0 голосов
/ 20 сентября 2018

Я храню модель данных в службе, чтобы их могли использовать различные контроллеры.Внутри контроллера я ограничиваю его так, чтобы элементы могли связываться с ним, используя ng-модель:

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

angular.module('hiveApp').controller('weatherController', function($scope, $rootScope, weatherModel, messageService, utilityService, $http, $timeout, $cookies, $window, $controller) {

$scope.weatherModel = weatherModel;

Затем в элементе HTML: 

<input type="text" id="city" ng-model="weatherModel.city" />

Пока все хорошо, это работает.Проблема возникает, когда я ввожу директиву в микс.У меня есть директива, которая обрабатывает пару переключателей и использует шаблон.Этот шаблон пытается использовать ng-модель для ссылки на те же параметры сервиса weatherModel, однако, хотя он работает из HTML-кода на самой странице, шаблон директивы не работает: 

app.directive('radiopair', function() {
return {
    restrict: 'E',
    template: `
        <div style="color:white; float:left">
            <input type="radio" id="metric" name="conversion" value="metric"
                   ng-model="weatherModel.conversion" selected> Metric<br>
            <input type="radio" id="imperial" name="conversion" value="imperial"
                   ng-model="weatherModel.conversion"> Imperial<br>
        </div>
    `,
    link: function ($scope, element, attrs) {
        element.on('click', function (event) {
            event.currentTarget.selected = true;
            $scope.refreshTable();  
        });
    }       
}
});

Когда я переключаюсь междудве кнопки, значение ng-model = weatherModel.conversion никогда не обновляется.Я полагаю, что это должно быть какой-то проблемой, но я бью стену о том, как это исправить.

1 Ответ

0 голосов
/ 20 сентября 2018

Вместо использования обработчика щелчков для вызова функции refreshTable используйте директиву ng-change : 

app.directive('radiopair', function() {
    return {
        restrict: 'E',
        template: `
            <div style="color:white; float:left">
                <input type="radio" id="metric" name="conversion" value="metric"
                       ng-change="refreshTable()"
                       ng-model="weatherModel.conversion" selected> Metric<br>
                <input type="radio" id="imperial" name="conversion" value="imperial"
                       ng-change="refreshTable()"
                       ng-model="weatherModel.conversion"> Imperial<br>
            </div>
        `,
        //link: function ($scope, element, attrs) {
        //    element.on('click', function (event) {
        //        event.currentTarget.selected = true;
        //        $scope.refreshTable();  
        //    });
        //}       
    }
});

Избегайте манипулирования атрибутом select <input>элементы.Это должно быть сделано директивой ng-model и ngModelController.

...