Suppose I want to create a directive that only matches elements with the attribute amInput[type=dropdown]. How can this be achieved?
One possible approach is:
.directive('amInput',function () {
return {
restrict: "E",
scope: {
data:'@'
},
compile:function(tElement, tAttrs){
if (tAttrs.type != 'dropdown') return;
return function link ($scope, element, attr, ctrl) {
var parseResult = parse($scope.data);
}
}
}
});
However, if another directive with an isolate scope for am-input[type=checkbox] is defined:
.directive('amInput',function () {
return {
restrict: "E",
scope: {
data2:'@'
},
compile:function(tElement, tAttrs){
if (tAttrs.type != 'checkbox') return;
return function link ($scope, element, attr, ctrl) {
var parseResult = parse($scope.data2);
}
}
}
});
The use of angular#$compile results in an exception regarding two directives defining an isolated scope.
Error: [$compile:multidir] Multiple directives [amInput, amInput] asking for new/isolated scope on: <am-input type="checkbox"></am-input>