javascript - angularjs 观看单选按钮，用于更改仅在第一次选择时工作

Question

所以我有一个单选按钮列表，我试图在指令中使用 $watch 观察选择的变化。我只能在第一次选择这些元素时触发 watch 。

我的html:

<p ng-repeat="(key,item) in option" style="margin-bottom:0px ">
    <label>
        <input type="radio" is-valid ng-model="value" selected-key="value" name="select" value="{{key}}" ng-checked="getChecked($index)"> {{item.name}}
    </label>
</p>

我的指令返回:

return {
    restrict: "A",
    scope: {
        selectedKey: '='
    },
    link: function(scope, elem, attrs) {
        scope.$watch('selectedKey', function(newValue, oldValue, scope) {
            alert('triggered')
        });
    }
}

我究竟做错了什么？我尝试只用“值(value)”观看，但 watch 没有被触发。

先感谢您

Answer 1

您需要了解 ngRepeat为每个迭代项创建一个新范围。这意味着 value对于每个单选按钮都是独立的。由于每个 radio 输入仅触发一次结果监视表达式，因此此后它永远不会改变。

您需要做的是使用包含选定单选值的父范围模型。您可以通过在 Controller 中声明模型来实现这一点，例如:

$scope.radio = {value: null};

并将此模型用于每个单选按钮。此外，我删除了多余的 selected-key属性，你不需要它，因为你已经有一个指向同一个 radio.value 的 ng-model .

该指令将如下所示:

app.directive('isValid', function() {
    return {
        restrict: "A",
        scope: {
            selectedKey: '=ngModel'
        },
        link: function(scope, elem, attrs) {
            scope.$watch('selectedKey', function(newValue, oldValue, scope) {
                console.log('triggered')
            });
        }
    };
});

演示: http://plnkr.co/edit/K8HJo8c81dFRKxZ2oyus?p=preview