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:
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