We are in the process of gradually switching our application to work with Angular. I have developed an angular module and a directive that aims to connect specific functionality to an HTML element.
angular.module('myApp', [ ])
.controller('myCtrl', function($scope){
$scope.someFunction = function(){return "Not what I'm looking for.";};
$scope.foo = "BAR";
})
.directive('myDirective', function(){
return {
restrict: 'EA',
transclude: true,
template: '<div><p>Here is some sample HTML template.</p></div>',
link:{ post:function(scope, element, attrs){
var elementId = attrs.myId;
scope.someFunction = function(){return "I expect to see this, elementId: " + elementId;};
scope.foo = "xxxx";
}
}
};
});
With the following html:
...
<myDirective my-id="e1"></myDirective>
<myDirective my-id="e2"></myDirective>
<myDirective my-id="e3"></myDirective>
...
And some JavaScript:
...
var test = angular.element(document.getElementById("e2") ).scope();
alert(test.someFunction());
...
I was anticipating to see "I expect to see this, elementId: e2", however, I am not. Upon inspecting the JavaScript in Firebug, I noticed that the test object is referencing the main scope instead of the isolated scope as I had hoped. I can confirm this because test.foo is displaying "BAR" instead of "xxxx". Furthermore, in Firebug, I can see that the $$childHead object is the inner scope I want, so I am quite sure there must be a way to access it without using something like test.$$childHead. Is there a correct method to achieve this?
Our team is still fairly new to Angular, so please excuse me if I overlooked something obvious. I understand that this may not align with the "Angular way" (any feedback is appreciated), but it aligns with our current migration approach and requirements. Thank you in advance.