I have a directive twice on a page, but it keeps overwriting itself. Meaning, the dialogId gets overwritten by the next instance of example-dialog in the template instead of keeping their own dialogIds.
angular.module('directives')
.directive('exampleDialog', ["$rootScope", "$timeout", "ngDialog", "$compile", '$templateRequest', function ($rootScope, $timeout, ngDialog, $compile, $templateRequest) {
return {
templateUrl: "/dialog.component.html",
transclude: {
button: '?dialogButton',
title: '?dialogTitle',
body: '?dialogBody',
footer: '?dialogFooter'
},
replace: true,
link: function (scope, el, attrs, ctrl, transclude) {
var dialogId = scope.blah.id; // gets overwritten - so when scope.open() gets called, the last instance ID gets used for both
scope.open = function(){
console.log(dialogId) // prints the same for both directives instead of the unique dialogId.
}
},
controller: function ($scope) {
}
}
}]);
With the following HTML:
<example-dialog>
<dialog-button>
<a href="#" ng-click="open()">ExampleButton1</a>
</dialog-button>
<dialog-title ng-non-bindable>Title1</dialog-title>
<dialog-body ng-non-bindable>
<div ng-include="'template1.tpl.html'"></div>
</dialog-body>
<dialog-footer ng-non-bindable>
</dialog-footer>
</example-dialog>
<example-dialog>
<dialog-button>
<a href="#" ng-click="open()">ExampleButton2</a>
</dialog-button>
<dialog-title ng-non-bindable>Title2</dialog-title>
<dialog-body ng-non-bindable>
<div ng-include="'template2.tpl.html'"></div>
</dialog-body>
<dialog-footer ng-non-bindable>
</dialog-footer>
</example-dialog>
How can I get them to save their own references while still inheriting their parents' scope?
EDIT
Someone recommended that I use scope: true
which is supposed to create classic prototypal inheritance.
However, When I try that - open()
from the <dialog-button>
tansclusion point doesn't work now, along with any other bindings in the template.