How to use angularjs custom instructions multiple times in one page

problem description

how to use angularjs custom instructions multiple times in one page

the environmental background of the problems and what methods you have tried

modification of scope scope

related codes

var PageApp=angular.module("ViewModule",[]);

//
PageApp.directive("mySwitch",function(){
    function mySwitch(scope,element,attrs) {
        if (scope.srcData==0){
            $("-sharptoggle-button").attr("checked",true)    //jsswitch
        } else{
            $("-sharptoggle-button").attr("checked",false)   //jsswitch
        }
        element.find("-sharptoggle-button").change(function () {
            if ($(this).is(":checked")){
                element.attr("resultData",0);
            }else{
                element.attr("resultData",1);
            }
        });
    }
    return {
        link: mySwitch,
        restrict: "EA",
        scope:{
            srcData:"=directiveData"
        },
        templateUrl:"component/Switch/Switch.html"
    };
});
//


//html
<hr>
<my-switch directive-data="0"></my-switch>
<hr>
<my-switch directive-data="1"></my-switch>
<hr>
//html

browser result:

clipboard.png

what result do you expect? What is the error message actually seen?

how can God make this custom instruction be used multiple times on a controller page without data conflict

Sep.09,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b306ee-2bd40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b306ee-2bd40.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?