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

Question

Я храню модель данных в сервисе, чтобы их могли использовать различные контроллеры. Внутри контроллера я ограничиваю его так, чтобы элементы могли связываться с ним, используя 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 никогда не обновляется. Я полагаю, что это должно быть какой-то проблемой, но я бью стену о том, как это исправить.

Answer 1

Вместо использования обработчика щелчка для вызова 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,