变量在使用同一角度指令的多个副本时不独立运行

我正在尝试创建一个带有 2 个单选按钮与update变量绑定的指令。现在我计划再次使用相同的指令。现在的问题是作用域变量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>

运行代码片段将清楚地了解问题。

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'));

相关内容

最新更新

热门标签：