第一次单击单选按钮后，角度 $watch newValue 未定义

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 属性以用于共享ng-model。