0

We are slowly porting an application to use Angular. I have an angular module and a directive that attempts to tie some functionality to an HTML element.

angular.module('myApp', [ ])

  .controller('myCtrl', function($scope){
    $scope.someFunction = function(){return "Not what I want to see.";};
    $scope.foo = "BAR";
  })

  .directive('myDirective', function(){
    return {
      restrict: 'EA',
      transclude: true,
      template: '<div><p>Here is some template html.</p></div>',
      link:{ post:function(scope, element, attrs){
               var elementId = attrs.myId;
               scope.someFunction = function(){return "I want to see this, elementId: " + elementId;};
               scope.foo = "xxxx";
             }
      }
    };
  });

Given some 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 would expect to see "I want to see this, elementId: e2", but I am not. When I inspect the javascript using Firebug, I see that the test object is referencing the main scope, not the isolated scope as I would expect (hope?). I can tell this because test.foo has the value "BAR", not "xxxx". Additionally, I can see in Firebug that the $$childHead object is the inner scope that I want, so I'm pretty certain there has to be a way to get to it besides something like test.$$childHead. Is there a proper way to do this?

The entire team is still relatively new to Angular, forgive me if I've missed something obvious. I realize this might not be the "Angular way" (any comments welcome), but it fits our present migration strategy and needs. Thanks in advance.

4
  • I see only what i expect with your example. plnkr.co/edit/xHxnpR?p=preview Commented Aug 19, 2014 at 22:13
  • In your example, you have var test = angular.element(document.getElementById("e1") ).scope(); but I'm seeing e3 in the alert and the preview page. Commented Aug 19, 2014 at 22:23
  • 1
    Yes that is expected because the last directive overwrites the reference of someFunction to that of the last one. And they all share the same scope. Commented Aug 19, 2014 at 22:29
  • You're absolutely right, that's what I expect now as well :) Thanks for setting me on the right tack. Commented Aug 19, 2014 at 23:53

1 Answer 1

0

I needed to add scope:true, so that I have this:

return {
  restrict: 'EA',
  transclude: true,
  scope: true,
  ...
};

to my directive definition. PSL set me on the right path; I was thinking the scope passed in to the linker was unique to each element. Here's an example. http://plnkr.co/edit/w7OGtRgtys7AeRtWH9qe?p=info

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.