Question

我将数据模型保留在服务中，以便各种控制器可以使用它们。在控制器内部，我对它进行了范围调整，以便元素可以使用ng-model绑定到它：

在控制器中：

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-model引用相同的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

使用ng-change指令代替使用点击处理程序来调用refreshTable函数：

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完成。

从模板内部将ng-model绑定到Service参数

1 个答案: