Question

我正在尝试创建一个带有update变量的2单选按钮绑定的指令。现在我计划再次使用相同的指令。现在问题是作用域变量update没有独立行动。

以下是我创建的模拟示例

var myApp = angular.module('myApp',['ngRoute']);

myApp.directive('myDirective', function () {
    return {
        restrict: 'A',
        scope: false,
        template: '<div><span>A new directive</span>'
                    + '<input name="updated" type="radio" ng-model="con.isUpdate" ng-checked="con.isUpdate" />'
                    + '<input name="updated" type="radio" ng-model="con.isUpdate" ng-checked="!con.isUpdate" />'
                    + '</div>',
        controller: controller,
        controllerAs: 'con'
    };

    function controller ($scope) {
        $scope.isUpdate = true;
    }
});

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
        <script src="index.js"></script>
    </head>
    <body ng-app="myApp">
        <div my-directive></div>
        <br/>
        <div my-directive></div>
    </body>
</html>

运行代码段可以清楚地了解问题。

Answer 1

radio输入具有相同的名称，因此浏览器会根据名称对其进行“分组”并根据名称对无线电应用更新。

解决此问题的一种简单方法是将名称传递给指令以应用于无线电，或者（如下所示）创建不同的指令。

function Directive(name) {
    return {
        restrict: 'A',
        scope: false,
        template: '<div><span>A new directive</span>'
                    + '<input name="' + name + '" type="radio" ng-model="con.isUpdate" ng-checked="con.isUpdate" />'
                    + '<input name="' + name + '" type="radio" ng-model="con.isUpdate" ng-checked="!con.isUpdate" />'
                    + '</div>',
        controller: controller,
        controllerAs: 'con'
    };

    function controller ($scope) {
        $scope.isUpdate = true;
    }
}

myApp.directive('myDirective', new Directive('updated'));
myApp.directive('myDirective2', new Directive('updated-alt'));

当使用相同角度指令的多个副本时，变量不会独立行动

1 个答案: