Question

我在指令中有一个单选按钮，我在页面上有一些这样的指令。所有这些单选按钮都具有相同的名称。当我点击其中任何一个时，$ watch中的newValue未定义。 ng-change事件也只触发一次（我猜是出于同样的原因）。我的问题是如何知道每次点击指令内的单选按钮的当前状态（我将传递给父指令）？

 var app = angular.module("app", []);
        app.directive("choiceRb", function() {
            return {
                template: '<input type="radio" id="{{elid}}" name="selector"  ng-change="onChange()" ng-model="checked" >',
                scope: {                   
                    elid: "@"
                },
                link: function ($scope, $element, attr, cntr) {                  
                    $scope.checked = $element[0].querySelector("input[type=radio]").checked;                   
                    $scope.$watch('checked', function (newval, oldval) {
                        console.log(newval);
                    }, true);
               
                    $scope.onChange = function () {
                        console.log("onChange");
                    }
                }
            };
        });
        app.controller("myC", ["$scope", function ($scope) {
            $scope.model = {};          
            $scope.model.elid = "1";           
            $scope.model.elid1 = "2";
        }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="app" ng-controller="myC">
    <div style="width:300px; height:300px; border:1px solid red;position:relative;">
        <choice-rb elid="{{model.elid}}"></choice-rb>
        <choice-rb elid="{{model.elid}}"></choice-rb>
    </div>
</div>

Answer 1

您的无线电输入元素上看起来没有任何value属性。您很可能希望将值作为属性传递给父级中的choice-rb元素。因此，您需要对指令和使用它的模板进行一些更改。

将elval指向choiceRb指令和ng-value属性添加到其模板中的input type="radio"。

app.directive("choiceRb", function() {
    return {
        template: '<input type="radio" id="{{elid}}" ng-value="{{elval}}" name="selector"  ng-change="onChange()" ng-model="elmodel" >',
        scope: {                   
            elid: "@",
            elval: "@",
            elmodel: "="
        },
        ...

将elval属性添加到主模板

中的choice-rb元素

<div ng-app="app" ng-controller="myC">
    <div style="width:300px; height:300px; border:1px solid red;position:relative;">
        <choice-rb elid="selector-{{model.elid}}" elval="{{model.elid}}" elmodel="model.value"></choice-rb>
        <choice-rb elid="selector-{{model.elid1}}" elval="{{model.elid1}}" elmodel="model.value"></choice-rb>
    </div>
</div>

请注意，我还更改了elid属性，前缀为selector-，这是因为input id's must start with a letter以及您定义的model.elid和model.elid1值都是数字（对输入的value属性完全有效。）

修改：添加了用于共享elmodel的{{1}}属性。

首次单击单选按钮后，Angular $ watch newValue未定义

1 个答案: